placeholderの文字列を、ユーザ入力中も表示し続けることは可能でしょうか？
解決済
回答 8
投稿
- 評価 -8
- クリップ 1
- VIEW 247
たとえば以下のようなinputタグがあるとします。
<input type="number" name="ball" placeholder="個">
このとき、placeholderで指定した「個」という文字は、ユーザ入力前には薄いグレー色等で表示されていますよね（一般的なブラウザの場合）。
これはユーザが何か入力をすると消えてしまうわけですが、「個」を表示し続ける方法はないでしょうか？
例示したケースの場合、たとえば数字の1を入力しても「1個」と表示されるようにしたいのです。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
- メールアドレスの認証
メールアドレスの認証
- 質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
+7
placeholderは「個数を入力してください」などの
ヒントを示してユーザーの操作を補助する目的で使用されるため
質問にあるように「個」だけ表示させるのはUI/UXの観点から問題があります。
無理やり実装することはできますがコード量が無駄に多くなってしまうので
<input type="number" name="ball"> 個のように
シンプルな記述のほうが良いです。
ほとんどのWebサイトではこのようになっていますし
ユーザーは経験上、こちらのほうがわかりやすいです。
投稿
score 1655
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
-
＞「個」だけ表示させるのはUI/UXの観点から問題があり
いや、それは状況によるでしょう。
私のサイトでは現状は「個」と書いたほうが分かりやすい状態になってます。
サイト全体の他の情報とかスペースの都合とかいろいろあるので。
＞ユーザーは経験上、こちらのほうがわかりやすい
ええ、わかってます。
でも、そういう通常の一般論でやれない場面なので困ってます。 -
イレギュラーなことをやろうとしている自覚があるのでしたら、なおさらきちんと背景は書くべきです。それに対象としたいブラウザなど環境面の情報は最低限必要です。
+4
そもそもplaceholderは使えないので、どうしてもそうしなきゃいけないのであればMaterializeのText Inputsのようにフォーカスでラベルを外に逃がすような作りにするとかですね。
どんな事情か知らないですけど、入力に被るのが使いやすいと思う人はなかなかいないと思います。
むしろ「そうしなきゃいけなくなった」レイアウトを見直したほうが利用者には優しい作りになるのではないでしょうか。
そもそも「個」という単位一文字すらスペース確保できないってモバイルUIとして本当に使いやすいの？という疑問はこの質問をみた人の多くが感じるところと思います。
組み方次第でスペースが作り出せるなら組み方を見直してみては。
イレギュラーな対応をしてまで、労力をかけてまで実現して得られる効果がどれほどかは熟考が必要でしょう。
数十日かどうか知らないですが、考える方向性次第では何百時間が無駄になることはよくあります。
自身では多角的に考えたつもりかもしれませんが、そのうえでこの結論だったとすると、「もっと他にあるのでは」と感じるのはある程度経験がある回答者としては自然です。
type=numberの時点で数字しか入力できないわけですし、日付とか電話番号とか入力フォーマットを指定しない単なるラベルなのであれば項目名だけあれば充分のようにも思います。
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
-
このMaterializeの入力は面白いですね（スペルミスの修正、ありがとうございました） - ごめんなさい直したつもりですがみてるところ間違ってたら教えてください。
私がMaterialize使い始めたのもこの入力の挙動が気に入ったからというのもあります。(あとBootstrapから逃げたい時期があった) - 主観的なお説教は求めておりません。
- どこが主観的でしょうか。
UI/UX観点は一般的なものですよ？
既にUI/UXに関する回答がついていて最も評価されている以上、私の回答だけを対象に「主観的」という指摘は無理があります。主観的であれば私は「個人的には」というのを一言添えます。
で、どこが主観的でしょうか？具体的に指摘してください。できないなら低評価はあくまであなたの好みという極めて主観的な観点で行っているということになります。 - 「やめて」と言われてるのに同じことを繰り返すのは、ただの嫌がらせですよ。ストーカー的です。
- 意味がわかりません。
あなたとそう関わった覚えはないのですが…
それより「主観的」と判断された理由を客観的にコメントもらえませんか？
誰も揉めようとして利用しているわけではないのでわざわざ噛みつくのはマナーとしてどうかと思います。 - 嫌がらせしている自覚がないのはストーカーの典型的な特徴です。
本当にやめてください。怖いです。気持ち悪いです。
二度と私の書き込みに対して返答しないでください。
私を無視してスルーしてください。
あなたが私に絡んでくる行為はストーカーだと私は感じています。
トラウマになりそうなのでやめてください。 - じゃあまず「ストーカー」「嫌がらせ」と言ったことを謝ってください。勝手に突っ走ったことを謝ってください。どう見てもそちらが先です。順序を間違えて起きていない問題を生んで膨らませて勝手に拡大させないでください。
私のことはそのあとです。 - 回答にも本質問にも関係のないコメントで暴れたことも謝るべきですね。
引くに引けなくなったのは分からなくもないですが、落ち着きましょう、大人なら。 - なぜストーカーに対して被害者が謝る必要があるのですか？
先にストーキングしたのはあなたですよ。
とにかく私に関わるのをやめてください。
スルーしてください。
精神的な恐怖を感じています。
私に絡む一切の書き込みをやめてください。 - １ユーザーにそのような権利はありません。
運営に勝手に相談して勝手に玉砕してください。
問題解決にしか興味がないと言っているのに嫌がらせだのストーカーだの決めつけられるのは心外です。挙げ句のはて被害者？ふざけるのなら他所でやってください。
あなたのほうが言動が常軌を逸しています。落ち着いてください。
そう息巻いたところで問題は解決しません。私に暴言を吐き続けたところでむしろ後退し別の問題が積み重なるだけです。
まずは冷静に。問題解決することだけ考えてください。 -
おす。相変わらずすげぇ粘着してんなぁ。 - >あなたのほうが言動が常軌を逸しています。落ち着いてください。
- いやぁ、どうみてもおめぇのやり方の方が常軌を逸してると、おら、思うぞ。
何が何でも相手がおめぇの思う通りにしねぇと気がすまねぇのは、
そりゃあおめぇ、病気だ。
相手は「あなたは要らない」って言ってんだから、
「おぅ、そうか」で済ませりゃいいじゃねぇか。
相手が間違ってるなら誰も相手にしねぇから困るのは相手のはずだろ。 - >常軌を逸しています。落ち着いてください。
>そう息巻いたところで
>まずは冷静に
こういうふうに、自分の都合のいいように事実を捻じ曲げるのもやめといた方がいいと、おら、思うぞ。
別にそいつはおめぇがいうような事はしてねぇぞ。
単純に、おめぇが、気持ち悪いから、関わらないでくれって言ってるだけだ。
おめぇは本当に、言ってることがストーカーなんだよ。 - さすが悟空さはまともだべ！
- 何度問題起こして運営から追い出されても見た目のキャラだけ変えてまともなようなことを発言して結局同じことをして追い出されてまたキャラ変えて戻ってくる粘着な人はとてもまともとは思えませんけど。
あなたの味方をする人は言っては悪いですがたいていあまりまともではない質問者です。
この質問にはこういう回答しかできないのは明白でしょう。本人もやりたいことが正確に伝わっていないのは述べていて別でも要件不明瞭が指摘されていて、それでも質問に追記も質問修正もしないのですから、これ以上の回答はこなくて当然です。回答も幾つかしてるようですけど、それならもっと回答側のことがわかるんじゃないですか？回答側の立場にたった質問が書けるんじゃないんですか？
要件不明瞭を指摘されていて追記しないのは横柄で横暴です。それどころか暴言とはマナーすらも逸脱しています。
初心者マーク関係ありません。つけ忘れたのか意図的につけてないのかを知る術は他者にはありませんし(機能を知らない人もいるから)、質問内容は書かれていることが全てです。
要件不明瞭で解決できる問題はありません。悪戯に時間を浪費するだけです。自らその数十日を無駄にしてるだけじゃないですか。
その要件不明瞭を感じて追記修正依頼を正しく使ってストーカー呼ばわりするのはどうなんですか？
あと大事なことですが、質問と関係ないコメントは控えてください。
馴れ合いたいのでしたら勝手に他所でやってください。叩きたいのでしたら他所でやってください。
野次馬が絡んできても問題を横道に逸らせるだけで問題解決には向かいません。
絡むのではなく問題解決に向かう回答でもしてあげてください。
(これまでと同じように低評価と通報で追い出されるのは見えてますが、それを恐れてるんですかね) - ああ、失礼。既に別の質問で回答して既に他の回答に粘着に絡みまくって嫌がらせをしてましたね。
私も低評価と通報したのをすっかり忘れてました。
もう誰にも求められてないのを自覚されたら如何でしょう(私見として処理されると思うのでこれ以上私も本質問に関係ないことは控えておきます) - おす！
すっげぇ荒れてんなぁ、mts10806。
>常軌を逸しています。落ち着いてください。
これ、やっぱりおめぇの事じゃねぇか、おら、びっくりしたぞ。 - ＞mts10806
だからあんたのその粘着書き込みが最も問題解決の妨げになってんの。
ストーカーって本当に自覚がないんだね。
「やめてくれ、関わらないでくれ」って何回言えば分かるの？ - おめぇなぁ、本当に、物事が自分の思う通りにならねぇと我慢できなくなって捲し立てるクセ、
なんとかした方がいいと、おら、思うぞ。
>もう誰にも求められてないのを自覚されたら如何でしょう
んとな、おめぇ、一体何回質問者に
「ストーカーするのは止めてください、もうコメントしないでください」
って言われてんだ？
おめぇ、本当に自分がストーカーである自覚がねぇのか？
それは完全に病気だと思うぞ。傍から見てて、おめぇ、本当に気持ちわりぃぞ。
質問者がかわいそうじゃねぇか。辞めといてやれよ。 - >回答も幾つかしてるようですけど、それならもっと回答側のことがわかるんじゃないですか？回答側の立場にたった質問が書けるんじゃないんですか？
おめぇも昔は何もしらなかったんだから、質問側のことをわかってやって、質問側の立場に立って物を考えたらいいんじゃねぇか？
おめぇは何が何でも自分の思う通りになってないと気がすまねぇだけだろ。 - 質問に関係あることだけにしてもらえますか？
どこが関係ありますか？で、gokuだかなんだか知りませんが、無駄な上げ足とってる暇があればこの質問者のこの質問に対して回答してあげたらどうですか？
数少ない熱心な支持者なようですし、すぐベストアンサーもらえますよ？
私にいちいち突っかかるより、そのほうが問題解決に進むでしょう。
結託してやってきても結局別の問題を引き起こしているだけです。
問題解決のサイトで別の問題起こしてどうするんですか。
それとも、今回の質問に対する問題解決策も何も持ってないのに私に突っかかりたいがためだけにコメントしてきたということでしょうか。それって荒らし ですよね。 - その何百文字かを今回の質問のために向ければ質問者のためにもなるでしょう。
私に向けたところでなんの解決に向かうんですか？聞いたところで屁理屈返すだけでしょうけど、
私の今回の回答以上に役に立たないのは明らかです（一応、それなりに高評価があることから今の質問内容に対しての回答になっていることは第三者から見て問題ないという認識です。） - >その何百文字かを今回の質問のために向ければ質問者のためにもなるでしょう。
おめぇのその何万文字かは、質問者に何の役にも立ってねぇどころか
要らねぇから止めてくれって言われてっけどなぁ。
本当に、頭を冷やした方がいいんじゃねぇか？ - >今回の質問に対する問題解決策も何も持ってないのに私に突っかかりたいがためだけにコメントしてきたということでしょうか。
ははは、おめぇ、本当に自分の事しか考えられねぇみてぇだな。
おめぇの、陰湿で、粘着質で、執拗な、これまでの、数々の、行為が、単純に、気持ち悪くて質問者がかわいそうだからコメントした。
ただ、そんだけだぞ。 - それに別でも指摘があるように
> 質問文だけ見ると「placeholderの意味がわかっていない初心者」に見えますよ。
です。書いてあること以外を勝手に回答者の憶測で広げるのは厳禁です。
既にいくつも要件不明瞭が指摘されている以上、ここまで頑なに質問に追記も編集もしないのは
もはや問題解決を放棄していると捉えられて仕方ありません。
だからこそこれだけ質問に低評価がついていると言えます。
本題に関係ないところに執心しても問題解決に繋がらないのは当然じゃないですか。
私を攻め立てたところで周囲の印象を悪くして余計に問題の解決から遠のかせるだけです。
むしろあなた方がここで私にコメントするのを辞めるべきでしょう。
私は質問の不明瞭しか指摘していません。勝手にキレといて被害者面はどうみてもおかしいです。
一般的な観点がないようなので気づかないだけですね。
いずれにしてもこのまま続けても多数のユーザーと運営から注意受けるだけになると思いますが・・ - mts10806、おめぇ、他の回答者と質問者のやりとりにまでデバっていって嫌がらせしてんじゃねぇか。
そんなのも、今回だけじゃねぇ。
おめぇ、本当に病気だぞ。止めとけって。 - >もはや問題解決を放棄していると捉えられて仕方ありません。
なら、なんでぐだぐだ書いてんだ？
そりゃおめぇ、問題解決したいんじゃなくて、質問者を制裁してぇだけじゃねぇか。
そんな権利、おめぇにはねぇと、おら、思うぞ。 - >余計に問題の解決から遠のかせるだけです。
質問者を攻め立てて、問題解決から質問者を遠ざけているのは、おめぇだ、mts10806。
いい加減に気づけ。太陽と北風の話をしらねぇのか？おめぇ。
おめぇみたいな北風がいくらぴーぷー言ったところで、質問者はコートを脱がねぇと、おら、思うぞ。 - >勝手にキレといて被害者面はどうみてもおかしいです。
それはおめぇの主観的な意見だな。
おらは、そうは思わねぇ。 - 嫌がらせというのは、最初から質問に関係のないところから入ってきて今でもひとつも質問に関することをコメントしていないあなた自身のことです。
あなたが来るから別の方向に飛び火して余計に荒れるんです。
質問者も切れてしまった以上、引っ込みが聞かなくなって悪のりせざるを得ない状態になっている。
人に病気だストーカーだ言っている暇があるなら自身のこれまでの言動を全部振り返ると良いです。
できないから今の事態になっているわけですし、改善しようもない闇を抱えているようなので、結局そういう人なんですよね。
「何度運営から追い出されても懲りない人」以上に深い何かを抱えた人はいないと思いますよ。
わかったらさっさと直球で問題解決の回答をしてあげてください。私にかかわっても無駄だとそろそろ気づかないか？何のために私に突っかかってきてるんですか？ - >いずれにしてもこのまま続けても多数のユーザーと運営から注意受けるだけになると思いますが・・
運営から注意うけるのがこえぇなら、おめーもいい加減にストーキング止めといたほうが無難だと、おら、思うぞ。
なぁ、mts10806、
おめぇ、自分が優位な立場で居るのをいいことに、如何にも正義らしい皮を被って弱ぇやつに石を投げ続ける奴が居たら、どう思う？
おら、おめぇの事を本当に軽薄な偽善者だと思ってる。 - >あなたが来るから別の方向に飛び火して余計に荒れるんです。
おら、本件に関しては一切飛び火させてねぇぞ。
おめぇはあっちこっちに飛び移って他の回答にまで火をつけてるみてぇだけどな。 - ちなみに
goku59なる人物は何度も「やめて」「絡むな」といってもこうやって絡んでくる陰湿な方です。
何度も追い出されてますが、前のときからずっとです。
zico_teratailさん 自分が書いたことを思い出してください。
>・「やめてくれ」と言われても同じことを繰り返す
・「それは嫌がらせだ」と指摘されても認めずに居直ってまた行為を続ける
これってまさにストーカーの典型じゃん。
>嫌がらせしている自覚がないのはストーカーの典型的な特徴です。
本当にやめてください。怖いです。気持ち悪いです。
自覚がないようなのでストーカーですね。
ストーカーに賛同して加担しているあなたも大概ですよ。 - >質問者も切れてしまった以上、引っ込みが聞かなくなって悪のりせざるを得ない状態になっている。
ん？ 意味がよくわかんねぇんだけど、「悪のり」してるのは誰だ？
mts10806、おめぇ自身の事か？
そりゃおめぇ、荒らし だぞ。 - ＞mts10806
＞結託してやってきても結局別の問題を引き起こしているだけです。
めっちゃ早口で言ってそう。
だからあんたの存在と長文の自説開陳書き込みこそが最も大きな問題だってあと何万回言えば理解できんの？
ストーカーって本当に自分に都合が悪いことは無視して、やめてくれと言われたことをやり続けるよね。 - すげぇな、ストーカーが被害者ヅラして他人をストーカー呼ばわりし始めたぞ。
mts10806、おめぇ、本当におもしれぇ奴だな。 - ＞運営から注意うけるのがこえぇなら
私は運営から注意受けたことはないですよ。
ぶっ飛んだ質問者からの通報だけでは運営も動きようがないでしょう。
第三者がコメントの流れを見ると「なんでこの質問者キレた？」となるでしょうし。 - goku59
じゃあ、やめてください。私に金輪際関わらないでください。何があっても。
正直なところ、私もあなたの陰湿な絡みには恐怖を抱いていますし、
なんの問題解決にも向かわないので単に疲れるだけです。
本当にやめてください。運営への通報以上の舞台にはさすがに行きたくないので。 - 悟空さ、こいつマジで危ないヤツなので、もう無視しましょう。もう相手にしないでください。こいつからの粘着書き込み通知があるだけでストレスで心身にダメージが来ます。
悟空さにおかれましては、こちらの心情を慮ってくださってありがとうございました。teratailはすごい技術力のある人が多い一方で、異常かつ四角四面にルールにうるさい人も多く、ちょっとでも気に入らないとネチネチネチネチどうでもいい細かいことにこだわって猛粘着する撮り鉄的なヤバい人が多いのが怖いところです。 - 私自身、zico_teratailさんには「違う方向にいってしまって残念です。」と言った時点で終わったものと思っているので。
勝手に無用に絡んできてるから仕方なく返しているだけです。
（
ルールは守るべきものなのでうるさいとか関係なく私の言っていることがサイトのルールであるなら守る以外の選択肢はないです。
「別に車走ってなきゃ逆走しても構わないでしょ」という理屈はどこにいっても通じません。
）
ちなみにgoku59なる人物は何度も運営に追い出されたならず者なのでその人の味方をするのはあなたの損にしかなりません。
何を晒したいのかわかりませんが、このやり取りを続けたところで何も生まれないので、本当に私はここではこれ以上のコメントはしません。勝手に荒らしててください。 - >ぶっ飛んだ質問者からの通報だけでは運営も動きようがないでしょう。
おー、つまりおめぇは、
運営が動きようが無いのをいい事に、やりたい放題やってます、
と、言いてぇわけだな。
そりゃおめぇ、故意犯だな。ストーキング故意犯だ。 - >じゃあ、やめてください。私に金輪際関わらないでください。何があっても。
>正直なところ、私もあなたの陰湿な絡みには恐怖を抱いていますし、
>なんの問題解決にも向かわないので単に疲れるだけです。
あれ？ おめぇ前に、「一利用者にそんな事を制限する権利があるわけないでしょう」とか誰かに言ってなかったか？ - んーと、zico_teratailさ、おめぇはおめぇのやりたいようにやってていいぞ。
おらはおらのやりたいようにやる。
多分おめぇんとこに山のように通知が行ってるんだと思うんだが、
まぁ、質問したのはおめぇだから我慢して無視しといてくれよ。 - >「別に車走ってなきゃ逆走しても構わないでしょ」という理屈はどこにいっても通じません。
よぅ、おめぇの言う「逆走」ってなんだ？
ちょっと説明してみてくれよ。おめぇのたとえ話は全く見当違いに事実を捻じ曲げてるんじゃねぇか？
そうなら、そりゃ、おめぇはものすげぇ薄汚ねぇ奴だと、おら思うぞ。
+3
タグには JavaScript とありましたが、 CSS だけでも可能です。
placeholder は input にフォーカスしたり入力値がある場合は、非表示になります。ですので、フォーカス時と入力値があるときに「個」の表示を右にずらせば希望通りのことができるかと思います。
<span>
<input type="number" name="ball" id="amount" placeholder=" ">
<label for="ball"></label>
</span>span {
position: relative;
}
label::before {
content: '個';
position: absolute;
opacity: .3;
left: 0;
right: initial;
}
input:focus + label::before {
right: 1.5em;
left: initial;
}
input:not(:placeholder-shown) + label::before {
right: 1.5em;
left: initial;
}追記: 上記サンプルは、 Internet Explorer と Microsoft Edge では動作しないので、 JavaScript でクラスを付け外ししたほうが実用的だと思います。
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
-
-
ご指摘ありがとうございます。
あまり実用的ではないので回答に追記しておきました。 - あとから追記された質問者のコメントでわかったのですが
レスポンシブサイトのスマホ用画面で使用するそうなので
今回のケースでは使用できます。 - ありがとうございます。
今回bootstrap絡みのせいか、上手くいかないようです。
+3
少々トリッキーなやり方として、
- 枠のない
<input>（こちらが実際に入力フォームとなります）と、その外側に<div>（見た目上はこちらが枠を表示する）を用意する <input>の外側、<div>の内側に「個」を書いておく
このようにすれば、見た目上は枠内に「個」が出ているように見えますし、この「個」がデータとして混ざることはありません。。
投稿
- ユーザーランキング総合1位
- ユーザーランキング月間2位
- Ruby総合1位
- Ruby on Rails総合1位
- React.js総合1位
- TypeScript総合1位
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
- Teratailのヘッダ部分にある検索ボタンは、<input>の外側にある<div>に対してposition:absoluteを使って枠内の位置に固定しているようです。
和文入力なら左側から入力しているので、ボタンを右端に固定すれば実用上問題ないですが、数値は右寄せにして、それより右側に「個」を表示したいとなると、回答に書いたように<input>と<div>の間に「個」を入れるなど、もうひと工夫が必要になるかと思います。 - うーん…？
ちょっと私の意図とはご解釈が違うようです。
inputも実際には目に見える枠がありますし…（ブラウザによってレンダリングの仕方は違うとは思いますが） - > inputも実際には目に見える枠がありますし…
<div>の背景色と同じ色にしてしまえば、枠線があっても見えません。 - ありがとうございます。
ちょっと私の意図が上手く伝わっていないようです。
こちらの書き方が拙くてすみません。
+2
inputの後ろにspanでも書いて、ネガティブマージンで上に重ねる。
inputには margin-rightでも設定しておけばいいんでないの？
投稿
score 17806
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
- ありがとうございます。
inputに入力が予想される桁数（文字数）が固定であったり、あるいはmargin-rightがinputの入力に対して自動で可変するならば、その方法でもいいのですが… - 条件後だしはないわ
- 「文字数・桁数が固定」という条件は最初から出してませんが・・・？？？
むしろ一般的に入力フォームにおいて固定であるほうが珍しくないですか？ - 例えどんな方法だって入力欄カラオケははみ出ることになるわけでしょう。
それをもってNGというのであれば回答なんてないわ - ？？？
+2
placeholder属性
コントロールが値を持たない場合、placeholder属性は、データ入力を伴うユーザーの支援を意図する短いヒント（単語や短いフレーズ）を表す。ヒントは、サンプル値または期待された形式の簡単な説明かもしれない。指定される場合、属性は、U+000A LINE FEED（LF）またはU+000D CARRIAGE RETURN（CR）文字を含まない値を持たなければならない。
placeholder属性は、labelの代替として使用すべきでない。ヒントや他の助言テキストについては、title属性がより適切である。
Note: このメカニズムは非常に似ているが微妙に異なる：コントロールのlabelによって与えられるヒントは毎回表示され、placeholder属性に与えられた短いヒントはユーザーが値を入力する前にのみ表示され、ユーザーが詳細なヘルプを要求する際にtitle属性におけるヒントは表示される。
WCAG 2.0
Webページのアクセシビリティを満たす基準に、WCAG というものがあり、この基準に適合する場合の実装を書きます。
Web Content Accessibility Guidelines (WCAG) 2.0 は、ウェブコンテンツをよりアクセシブルにするための広範囲に及ぶ推奨事項を網羅している。 このガイドラインに従うことで、全盲又はロービジョン、ろう又は難聴、学習障害、認知障害、運動制限、発話困難、光過敏性発作及びこれらの組合せ等を含んだ、様々な障害のある人に対して、コンテンツをアクセシブルにすることができる。又、このガイドラインに従うと、多くの場合、ほとんどの利用者にとってウェブコンテンツがより使いやすくなる。
3.2.2 入力時: ユーザインタフェース コンポーネント の設定を変更することが、コンテキストの変化を自動的に引き起こさない。ただし、利用者が使用する前にその挙動を知らせてある場合を除く。 (レベル A)
あなたは「テキスト入力時もplaceholderを常時表示する」という非標準機能がある事を、ユーザに事前に知らせなければなりません。
3.2.5 要求による変化: コンテキストの変化は利用者の要求によってだけ生じるか、又は、そのような変化を止めるメカニズムが利用できる。 (レベル AAA)
あなたは「テキスト入力時もplaceholderを常時表示する」という非標準機能を、ユーザが任意で無効化にできるようにしなければなりません。
1.4.6 コントラスト (高度) : テキスト及び文字画像の視覚的提示には、少なくとも 7:1 のコントラスト比がある。ただし、次の場合は除く: (レベル AAA)
あなたは「placeholderテキスト」と「入力テキスト」の両方に 7:1 のコントラスト比を保証しなければなりません。
<input type="text" placeholder="一" value="｜">例えば、上記HTMLでは「placeholder = 一」「入力テキスト = ｜」であり、重ねてみれば「十」のように見えます。
しかし、あなたは「一」と「｜」のそれぞれに 7:1 のコントラスト比を保証し、それぞれ区別して読めるようにしなければなりません。
Re: zico_teratail さん
投稿
score 13741
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
checkベストアンサー
+1
こういう話でしょうか。
サンプル
<input type="number" name="ball" placeholder="個">
<input type="hidden" name="hiddenBall" placeholder="個">var target = document.querySelector('input[name=ball]');
var hiddenTarget = document.querySelector('input[name=hiddenBall]');
target.addEventListener('blur',function(){
target.placeholder = target.value+'個';
[hiddenTarget.value, target.value] = [target.value, null];
});投稿
score 9611
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
- サンプルにJavaScriptが記載されていないです。
- あれ？ set as base したはずなのに。
ありがとうございます。修正しました。 - ありがとうございます！
そういうことです。表面上の事象としてはそういうことなのですが、いただいたコードですと実際のvalueとして「個」まで送られてしまいますが、そうではなくて本来のplaceholderのように、ユーザには見えてるけど実際の値としては送られない文字として表現できる方法があればなぁ、と思っております。
ただし、今回の場合ならsubmitを受け取った側で「個」を削除すればいいだけとも言えますが、バリデーション等の問題で出来れば数値だけ受け取りたいというのが本音です。
-2
<input type="text" name="ball" value="個">これでどうでしょうか？
※注釈
フォームの出力先にも「１個」という文字列を送りたい場合
投稿
score 11
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
- type=numberにvalue文字列は指定できないのでは。それにあくまで初期値なのでtype=textしても入力の妨げにしかならないように思います。
- 確かに、出力先の詳細を付けて修正いたしました。
回答時点、valueで「１個」と送らないといけない業務用システムの可能性もあったので。 - んーそこは要件が提示されないと難しいところですね。
ユーザーが任意で編集できる入力コントロールである以上、削除もできてしまいますし、単位なら余計にシステム側で出力時に付与したほうが良さそうです
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 90.43%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
mts10806
2019/06/29 13:23
文字が被るのでUX的にどうなんだろう？と疑問にはなりますけど。
単位ならプレースホルダじゃなくラベルで常時表示させたほうが良いと思いますが、どういった経緯でそうしたいのでしょうか
zico_teratail
2019/06/29 13:26
スマホ用画面で他にもinputがいくつかあり、全体のレイアウトやスペースの関係上、ラベルを使うと画面に収まらずはみ出してしまうためです。
mts10806
2019/06/29 13:28
レスポンシブで対応できていれば「はみ出す」ということはないように思います。
ヘルプ文言(入力形式の指定など)をinputの下に表示させるのも良くある話ですし。
zico_teratail
2019/06/29 13:36
bootstrap使ってレスポンシブにしてます。
inputの「見た目の幅」とか、いろいろあるんですよ。
こちらの状況を逐一全部説明できませんが、とにかく出来ないことがあり困って質問してますので。
揚げ足とったりイチャモンつけたりするだけならお互い時間の無駄ですので、この質問を無視して見ないようにしてください。
mts10806
2019/06/29 13:39
「使いにくくならないかな？」という懸念だけなのですが、それを揚げ足ととられてしまうとできるアドバイスはないですね。
技術上可能ではあるけど「使う人の観点から本当にそれでいいのか」を考えてもらいたかっただけです。
mts10806
2019/06/29 13:40
すでにそういう回答もついているようですし、質問者さん側も無視はできませんよ。
zico_teratail
2019/06/29 13:50
「使う人の観点から本当にそれでいいのか」を考えに考えた結果、質問してます。
この質問に至るまでの数十日の思考履歴や背景まで全部書かないと質問しちゃいけないんですか？
もう勘弁してください。
mts10806
2019/06/29 13:54
違う方向にいってしまって残念です。
回答者側から見て「なんでわざわざそんな使いにくくしようとしてるんだろう？」という疑問が出れば背景や経緯は最低限必要と思います。質問するなという意味ではないですが、技術上可能なことと実用に足るかどうかはまた別の話です。
「いいから質問したことに答えればいい」はサポートセンター相手にやってください。
zico_teratail
2019/06/29 14:14
一から十まであなたの価値観に従わないといけないなんて、マジで勘弁してくださいよ。
mts10806
2019/06/29 14:24
なぜそうなるのか全くわかりません。いきなりキレられても困ります。
そもそも他者を頼ることを決めた以上はその他者が疑問に思ったり求める情報を提示するのは当然ではないでしょうか。それを出せないのであれば無料のQAサイトは適切な場所ではないですよということになります。求める情報は出せない、でも答えろって横暴でしかないですよ。
適切な契約を結んで適切な情報を提示して適切な対応をしてもらってください。
もちろん「UI/UX的な観点からどうなの？」というツッコミは必ず入るでしょうけど適切な契約を結んでいる先ならきちんと情報提示してたらやってもらえるでしょうし。
zico_teratail
2019/06/29 16:19
もう勘弁してよホント～。
横暴とか思うのなら関わらなければいいじゃない。
気に入らないならスルーして放っといてくださいよ。
mts10806
2019/06/29 16:22
得たい回答を得られなくてもよろしければ自身の(勝手な)方針を通されたらよろしいかと思います。
既に回答ついてますし私もしていますが代替案以外でませんよ。この内容だと。
zico_teratail
2019/06/29 16:25
ウザ…
mts10806
2019/06/29 16:41 編集
通報しておきますね。暴言が始まりましたし、問題解決に向かう気がないようです。多少なり力になれるかと思ってコメントしてきましたがまさか暴言が出てくるとは。
アドバイス聞く気がない人がなぜ質問をあげるのか疑問ですね。スコアからするとそれなりにやってきた人でしょうに…大変残念です。
質問への低評価も取り消さなくて結構です。あなたのような人の厚意を暴言で返すような人のためにとった時間ではありませんので。
zico_teratail
2019/06/29 16:44
こっちが通報したいくらいですよ。
何度もやめてくれと頼んでるのに繰り返しやってくるのは嫌がらせですよ。
挙句の果てに「暴言」などと言って被害者ぶって言葉狩りですか？？？ 本当にヤバい思考してますね。
こちらは何度もやめてくれと頼んでるのに、繰り返し嫌がらせで絡んできたのはあなたです。
mts10806
2019/06/29 16:48
質問への追記修正依頼をしていてなぜそうなりますか？理解しかねます。
zico_teratail
2019/06/29 16:52
・「やめてくれ」と言われても同じことを繰り返す
・「それは嫌がらせだ」と指摘されても認めずに居直ってまた行為を続ける
これってまさにストーカーの典型じゃん。
zico_teratail
2019/06/29 16:53
もう一度だけ言いますが、あなたの行為は私にとって嫌がらせに感じますから、もうやめてください。あなたが関わること自体が嫌がらせです。私のことが気に入らないなら無視してください。関わらないでください。
mts10806
2019/06/29 16:55
気に入らないとは思ってもないし書いてもないですよ。
落ち着いてください。冷静さを欠いていては正しい判断ができません。ここは問題解決をする場であって口喧嘩をする場所ではありません。私は端から問題解決にしか興味はありませんので。
zico_teratail
2019/06/29 17:03
とにかく私に関わるのをやめてください。
スルーしてください。
精神的な恐怖を感じています。
私に絡む一切の書き込みをやめてください。
otn
2019/06/29 21:46
>この質問に至るまでの数十日の思考履歴や背景まで全部書かないと質問しちゃいけないんですか？
書かないより書いた方が回答しようと思う人が増えると思います。
経緯を別に書かなくてもいいので、「UX的にこうしない方が良いのは分かっているが、どうしても説明すると長い理由があってこうせざるを得ない」という一文だけでも質問文に書いておけば良かったかと。顧客を説得できずヘンテコな仕様にせざるを得ない状況にある人はめずらしくないと思うので。
質問文だけ見ると「placeholderの意味がわかっていない初心者」に見えますよ。
zico_teratail
2019/06/30 01:50 編集
＞otnさん
ええ、それはそうですね。
まあ、どこまで思考や背景を書くのかは難しいというか、ある意味キリがないんで…。
初心者マークをつけてない質問なので、そこで察して欲しい部分はありましたが、ちょっと横着しすぎましたかね。
2019/06/30 08:13
複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。
yasutomi
2019/06/30 10:11
初心者でも初心者マークを付けない人が多いので、それで察しろというのは無理があります。
> 初心者マークをつけてない質問なので、そこで察して欲しい部分はありましたが、ちょっと横着しすぎましたかね。
zico_teratail
2019/06/30 10:18
となると、初心者マークの存在自体が無意味ということになってしまいますね…。私は一応、公式に用意されている機能（？）なので、初心者マークの有り無しによって違う目線で質問を見たり回答をしたりするようにしています。
あと、質問文全体を見れば、なんとな～く、その人が初心者かどうかって、分かるじゃないですか。ま、「だからおめーの質問は初心者に見えるんだよ！」って言われるのがオチでしょうけどもｗ
yasutomi
2019/06/30 10:20
私から見たらzico_teratailさんは初心者に見えました。
> 質問文全体を見れば、なんとな～く、その人が初心者かどうかって、分かるじゃないですか。
zico_teratail
2019/06/30 10:23 編集
予想通りの反応ありがとうございますｗ 質問の仕方が悪くてすみません。
まっ、相手がどういうレベルなのかを見極められるかどうかも一つの能力ですから、yasutomiさんもどうぞこれからも頑張ってくださいね～（＾＾）
yasutomi
2019/06/30 10:46
そういう煽るようなコメントをすると
今後回答をもらえなくなるのでやめたほうが良いかと。
zico_teratailさんは評価 -8 という
最低な評価になったのに反省されていないのですね。
> 予想通りの反応ありがとうございますｗ 質問の仕方が悪くてすみません。
> まっ、相手がどういうレベルなのかを見極められるかどうかも一つの能力ですから、yasutomiさんもどうぞこれからも頑張ってくださいね～（＾＾）