Q&A
文字が被るのでUX的にどうなんだろう？と疑問にはなりますけど。
単位ならプレースホルダじゃなくラベルで常時表示させたほうが良いと思いますが、どういった経緯でそうしたいのでしょうか
たとえば以下のようなinputタグがあるとします。
html
1<input type="number" name="ball" placeholder="個">
このとき、placeholderで指定した「個」という文字は、ユーザ入力前には薄いグレー色等で表示されていますよね（一般的なブラウザの場合）。
これはユーザが何か入力をすると消えてしまうわけですが、「個」を表示し続ける方法はないでしょうか？
例示したケースの場合、たとえば数字の1を入力しても「1個」と表示されるようにしたいのです。
スマホ用画面で他にもinputがいくつかあり、全体のレイアウトやスペースの関係上、ラベルを使うと画面に収まらずはみ出してしまうためです。
レスポンシブで対応できていれば「はみ出す」ということはないように思います。
ヘルプ文言(入力形式の指定など)をinputの下に表示させるのも良くある話ですし。
bootstrap使ってレスポンシブにしてます。
inputの「見た目の幅」とか、いろいろあるんですよ。
こちらの状況を逐一全部説明できませんが、とにかく出来ないことがあり困って質問してますので。
揚げ足とったりイチャモンつけたりするだけならお互い時間の無駄ですので、この質問を無視して見ないようにしてください。
「使いにくくならないかな？」という懸念だけなのですが、それを揚げ足ととられてしまうとできるアドバイスはないですね。
技術上可能ではあるけど「使う人の観点から本当にそれでいいのか」を考えてもらいたかっただけです。
すでにそういう回答もついているようですし、質問者さん側も無視はできませんよ。
「使う人の観点から本当にそれでいいのか」を考えに考えた結果、質問してます。
この質問に至るまでの数十日の思考履歴や背景まで全部書かないと質問しちゃいけないんですか？
もう勘弁してください。
違う方向にいってしまって残念です。
回答者側から見て「なんでわざわざそんな使いにくくしようとしてるんだろう？」という疑問が出れば背景や経緯は最低限必要と思います。質問するなという意味ではないですが、技術上可能なことと実用に足るかどうかはまた別の話です。
「いいから質問したことに答えればいい」はサポートセンター相手にやってください。
一から十まであなたの価値観に従わないといけないなんて、マジで勘弁してくださいよ。
なぜそうなるのか全くわかりません。いきなりキレられても困ります。
そもそも他者を頼ることを決めた以上はその他者が疑問に思ったり求める情報を提示するのは当然ではないでしょうか。それを出せないのであれば無料のQAサイトは適切な場所ではないですよということになります。求める情報は出せない、でも答えろって横暴でしかないですよ。
適切な契約を結んで適切な情報を提示して適切な対応をしてもらってください。
もちろん「UI/UX的な観点からどうなの？」というツッコミは必ず入るでしょうけど適切な契約を結んでいる先ならきちんと情報提示してたらやってもらえるでしょうし。
もう勘弁してよホント～。
横暴とか思うのなら関わらなければいいじゃない。
気に入らないならスルーして放っといてくださいよ。
得たい回答を得られなくてもよろしければ自身の(勝手な)方針を通されたらよろしいかと思います。
既に回答ついてますし私もしていますが代替案以外でませんよ。この内容だと。
ウザ…
通報しておきますね。暴言が始まりましたし、問題解決に向かう気がないようです。多少なり力になれるかと思ってコメントしてきましたがまさか暴言が出てくるとは。
アドバイス聞く気がない人がなぜ質問をあげるのか疑問ですね。スコアからするとそれなりにやってきた人でしょうに…大変残念です。
質問への低評価も取り消さなくて結構です。あなたのような人の厚意を暴言で返すような人のためにとった時間ではありませんので。
こっちが通報したいくらいですよ。
何度もやめてくれと頼んでるのに繰り返しやってくるのは嫌がらせですよ。
挙句の果てに「暴言」などと言って被害者ぶって言葉狩りですか？？？ 本当にヤバい思考してますね。
こちらは何度もやめてくれと頼んでるのに、繰り返し嫌がらせで絡んできたのはあなたです。
質問への追記修正依頼をしていてなぜそうなりますか？理解しかねます。
・「やめてくれ」と言われても同じことを繰り返す
・「それは嫌がらせだ」と指摘されても認めずに居直ってまた行為を続ける
これってまさにストーカーの典型じゃん。
もう一度だけ言いますが、あなたの行為は私にとって嫌がらせに感じますから、もうやめてください。あなたが関わること自体が嫌がらせです。私のことが気に入らないなら無視してください。関わらないでください。
気に入らないとは思ってもないし書いてもないですよ。
落ち着いてください。冷静さを欠いていては正しい判断ができません。ここは問題解決をする場であって口喧嘩をする場所ではありません。私は端から問題解決にしか興味はありませんので。
とにかく私に関わるのをやめてください。
スルーしてください。
精神的な恐怖を感じています。
私に絡む一切の書き込みをやめてください。
>この質問に至るまでの数十日の思考履歴や背景まで全部書かないと質問しちゃいけないんですか？
書かないより書いた方が回答しようと思う人が増えると思います。
経緯を別に書かなくてもいいので、「UX的にこうしない方が良いのは分かっているが、どうしても説明すると長い理由があってこうせざるを得ない」という一文だけでも質問文に書いておけば良かったかと。顧客を説得できずヘンテコな仕様にせざるを得ない状況にある人はめずらしくないと思うので。
質問文だけ見ると「placeholderの意味がわかっていない初心者」に見えますよ。
＞otnさん
ええ、それはそうですね。
まあ、どこまで思考や背景を書くのかは難しいというか、ある意味キリがないんで…。
初心者マークをつけてない質問なので、そこで察して欲しい部分はありましたが、ちょっと横着しすぎましたかね。
初心者でも初心者マークを付けない人が多いので、それで察しろというのは無理があります。
> 初心者マークをつけてない質問なので、そこで察して欲しい部分はありましたが、ちょっと横着しすぎましたかね。
となると、初心者マークの存在自体が無意味ということになってしまいますね…。私は一応、公式に用意されている機能（？）なので、初心者マークの有り無しによって違う目線で質問を見たり回答をしたりするようにしています。
あと、質問文全体を見れば、なんとな～く、その人が初心者かどうかって、分かるじゃないですか。ま、「だからおめーの質問は初心者に見えるんだよ！」って言われるのがオチでしょうけどもｗ
私から見たらzico_teratailさんは初心者に見えました。
> 質問文全体を見れば、なんとな～く、その人が初心者かどうかって、分かるじゃないですか。
予想通りの反応ありがとうございますｗ 質問の仕方が悪くてすみません。
まっ、相手がどういうレベルなのかを見極められるかどうかも一つの能力ですから、yasutomiさんもどうぞこれからも頑張ってくださいね～（＾＾）
そういう煽るようなコメントをすると
今後回答をもらえなくなるのでやめたほうが良いかと。
zico_teratailさんは評価 -8 という
最低な評価になったのに反省されていないのですね。
> 予想通りの反応ありがとうございますｗ 質問の仕方が悪くてすみません。
> まっ、相手がどういうレベルなのかを見極められるかどうかも一つの能力ですから、yasutomiさんもどうぞこれからも頑張ってくださいね～（＾＾）
えっ？ 煽ってるなんてとんでもございません！ 心外です！
yasutomiさん、初心者に見える私にかまってくれてありがとうございます！ yasutomiさんは上級者として今後も頑張ってくださいね（＾＾）
回答9件
0
placeholderは「個数を入力してください」などの
ヒントを示してユーザーの操作を補助する目的で使用されるため
質問にあるように「個」だけ表示させるのはUI/UXの観点から問題があります。
無理やり実装することはできますがコード量が無駄に多くなってしまうので
<input type="number" name="ball"> 個のように
シンプルな記述のほうが良いです。
ほとんどのWebサイトではこのようになっていますし
ユーザーは経験上、こちらのほうがわかりやすいです。
投稿2019/06/29 04:37
総合スコア2939
＞「個」だけ表示させるのはUI/UXの観点から問題があり
いや、それは状況によるでしょう。
私のサイトでは現状は「個」と書いたほうが分かりやすい状態になってます。
サイト全体の他の情報とかスペースの都合とかいろいろあるので。
＞ユーザーは経験上、こちらのほうがわかりやすい
ええ、わかってます。
でも、そういう通常の一般論でやれない場面なので困ってます。
イレギュラーなことをやろうとしている自覚があるのでしたら、なおさらきちんと背景は書くべきです。それに対象としたいブラウザなど環境面の情報は最低限必要です。
0
そもそもplaceholderは使えないので、どうしてもそうしなきゃいけないのであればMaterializeのText Inputsのようにフォーカスでラベルを外に逃がすような作りにするとかですね。
どんな事情か知らないですけど、入力に被るのが使いやすいと思う人はなかなかいないと思います。
むしろ「そうしなきゃいけなくなった」レイアウトを見直したほうが利用者には優しい作りになるのではないでしょうか。
そもそも「個」という単位一文字すらスペース確保できないってモバイルUIとして本当に使いやすいの？という疑問はこの質問をみた人の多くが感じるところと思います。
組み方次第でスペースが作り出せるなら組み方を見直してみては。
イレギュラーな対応をしてまで、労力をかけてまで実現して得られる効果がどれほどかは熟考が必要でしょう。
数十日かどうか知らないですが、考える方向性次第では何百時間が無駄になることはよくあります。
自身では多角的に考えたつもりかもしれませんが、そのうえでこの結論だったとすると、「もっと他にあるのでは」と感じるのはある程度経験がある回答者としては自然です。
type=numberの時点で数字しか入力できないわけですし、日付とか電話番号とか入力フォーマットを指定しない単なるラベルなのであれば項目名だけあれば充分のようにも思います。
投稿2019/06/29 05:53
編集2019/07/01 01:25総合スコア80886
このMaterializeの入力は面白いですね（スペルミスの修正、ありがとうございました）
ごめんなさい直したつもりですがみてるところ間違ってたら教えてください。
私がMaterialize使い始めたのもこの入力の挙動が気に入ったからというのもあります。(あとBootstrapから逃げたい時期があった)
主観的なお説教は求めておりません。
どこが主観的でしょうか。
UI/UX観点は一般的なものですよ？
既にUI/UXに関する回答がついていて最も評価されている以上、私の回答だけを対象に「主観的」という指摘は無理があります。主観的であれば私は「個人的には」というのを一言添えます。
で、どこが主観的でしょうか？具体的に指摘してください。できないなら低評価はあくまであなたの好みという極めて主観的な観点で行っているということになります。
> 例示したケースの場合、たとえば数字の1を入力しても「1個」と表示されるようにしたいのです。
と言ってるのに、
>どんな事情か知らないですけど、入力に被るのが使いやすいと思う人はなかなかいないと思います。
一体何が被ると主張してんだ？
おら、意味分かんねぇぞ。
>数十日かどうか知らないですが、考える方向性次第では何百時間が無駄になることはよくあります。
無駄かどうかは、おめぇが判断するんじゃなくて、実際にやって見るやつが判断するんだろ？
失敗しねぇと学べねぇ奴もいるし、失敗したから学べる事もあると、おら、思うぞ。
おめぇはその機会を奪おうとしているんだが、その理由は
「相手のことを思っている」ではなくて「自分が考えている以外のやり方を認めたくない」
ただそれだけだろ。
そりゃ、独善って言うんだ。
>type=numberの時点で数字しか入力できないわけですし
おめぇはもしかして、「たとえば」の意味がわからねぇのか？
>たとえば以下のようなinputタグがあるとします。
別に質問者はtype=nubmer限定で話をしてるわけじゃねぇと、おら、思うぞ。
placeholderの件にしてもそうだ。
別にplaceholderでなんとかしたいって話じゃなくて、一番近いのがplaceholderだから例示しただけにしか、おら、見えねぇぞ。
と、既に終わった問題に粘着している退会ユーザーはgoku59という名前でした。
投稿が大量に削除されているのもそのユーザーが野次馬として首を突っ込んできたためです。
なお、この質問内容にはこのくらいの回答になるというのは追記がない以上は仕方がないことで、「限定された話ではない」「例示しただけにしか見えない」などとというのであればそれに適した回答を起こすことすらしなかった人に言われる筋合いは全くないわけです。
いずれにしても私の回答やコメントも主観的にしか見れてない人に何を言っても無駄ですね。私を責めたいだけなら他所でやってください。
というか、私に絡まないでください。
この質問をしたzico_teratailというユーザーからすると
「
・「やめてくれ」と言われても同じことを繰り返す
・「それは嫌がらせだ」と指摘されても認めずに居直ってまた行為を続ける
これってまさにストーカーの典型じゃん。
」
らしいですよ。
ずいぶんと前(lで始まるユーザーの時代)から私は「やめて」と言っているはずなのでもはや重度ですね。
何一つありがたくないのでやめてください。
そして2度と戻ってこないでください。
> goku59さん
> そりゃ、独善って言うんだ。
悟空は「独善」とか言わない。
それはそれとして。
mts10806さんは、私から見ても「そこまでゲンミツにやらんでも」と感じることがあるので、お二人の気持ちもわからないでもないのですが、この質問の範囲に限れば、
「UX的にはどうだろうか？」
「サイズが納まらないので」
「上手く納まるデザインもあるのでは？」
「揚げ足とったりイチャモンつけたりするな」
という流れなのでzico_teratailさんの口がずいぶん悪いなあ、というのが初見の感想でした。
ただ、zico_teratailさんを少し擁護すると。
maisumakunさんへのコメントもあわせて考えると、おそらくフォーム部品の横幅をキレイに揃えて縦に並べたかったのかなあ、などと推察するところですが、zico_teratailさんがそのような詳細を説明しなかったのは、それについてまた「それだとUXが」などとつっこみを入れられるのを嫌ったのではないかな、と感じました。
そのようなことを考慮して上記のやり取りを見ると、
「デザインやUXについての指摘も理解できるが、とにかく私はこう作りたい。コードや技術的な面はともかく、あなたたちはデザインの専門家ではないのだから、一方的に私のデザインを否定しないで欲しい」
みたいに読めるんじゃないでしょうか。
つまり、mts10806さんはUXの問題を解消する更によい方法があるか検討しようとしたところ、zico_teratailさんは自分のデザインをけなされたと感じた、ということではないでしょうか。
知らんけど。
>と、既に終わった問題に粘着している退会ユーザーはgoku59という名前でした。
Zuishinの猿真似かぁ。
>悟空は「独善」とか言わない。
なにってんだ？おめぇ。
おら、gokuだぞ。
> おら、gokuだぞ。
違う、goku59だ。
>つまり、mts10806さんはUXの問題を解消する更によい方法があるか検討しようとしたところ、
うそつけぇ。
「俺は俺のやり方しか認めない」ってのがmts10806の言い分だと思うぞ。
>違う、goku59だ。
それは、IDだぞ。
おら、gokuだ。
>Lhankor_Mhy
これはおめぇの名前なのか？
よく市役所で届け出受理されたな。
アンダースコアが入ってる名前なんて、初めて見たぞ。
いや、たぶん英文字も使えないんじゃないかな……？
んでな、話を戻すけど、
おらは質問者がなんかおもしろそうな事かんがえてんなーって思って見てたんだが、
だからLhankor_Mhy、おめぇの回答について「近い」って言ってんだろ。
おら、そういう「既成概念にとらわれない考え方」っていうのは、
とても意味があるものだと思うぞ。
すくなくとも、全否定して自分のやり方しか認めねぇmts10806の考え方は
エンジニアじゃなくてただの作業工みてぇだと思うぞ。
>いや、たぶん英文字も使えないんじゃないかな……？
？ おめぇ、例えばシガニー・ウィーバーは
市役所に「シガニー・ウィーバー」ってカタカナで届け出たって言ってんのか？
意味分かんねぇな。
Lhankor_Mhyさん
あまり回答者に推察を強いるのはよくないと思いますし、いろいろ推察して考慮した結果の回答が的外れはよくあることで、それって質問側も回答側も手間になるのでなるべく避けたいと思ってます。
質問者が追記修正依頼に応じないなら仕方ない、質問から受け取れる内容で回答してみるか(もし違ってもそれはそうとれる質問内容だから質問した側の責任だよね)、で回答することもあります。今回ついた回答を見ると質問者の意図や想い、背景が伝わる内容ではないのは明らかですし、質問者の責任は大きいと思っています。
(まさかteratail約４年もやってて回答のほうが多いユーザーが編集の仕方を知らないわけがないし)
いずれにしてもgなんとかさんすらも「初心者」として扱ってるようなので、自身の実態と状態のずれに気づかない限り難しいでしょうね。
g
Zuishinさんが同じようなことをやってたんですか？
どこでやってたか知らないですけど、もしあなたの回答やコメントの流れでしたのでしたら詳しくは見てないので知らないです。なので真似ではないですね。
まあZuishinさんならやりそうですね。
>Zuishinさんが同じようなことをやってたんですか？
>どこでやってたか知らないですけど、もしあなたの回答やコメントの流れでしたのでしたら詳しくは見てな>いので知らないです。なので真似ではないですね。
>まあZuishinさんならやりそうですね。
かけらも面白くねぇな。やっぱりZuishinの方がおめぇよりずっと上だな。
まぁ、そんなのはどうでもいいけんど、
>あまり回答者に推察を強いるのはよくないと思いますし、いろいろ推察して考慮した結果の回答が的外>れはよくあることで、それって質問側も回答側も手間になるのでなるべく避けたいと思ってます。
そうやってやったおめぇは質問者に「要らねぇ」って言われて
おめぇが講釈たれてる相手がベストアンサーなんだけどな、
おめぇ、よくそういう恥ずかしいマネできんな。
おら、おめぇの事、なんか、すげぇ別の意味で尊敬すっぞ。
あとな、
あーもうやめてやめて。
どうせこの質問はこれ以上進まないし、そこまで有用な内容でもないし、思い込みで執拗に絡んでこられても迷惑なだけなので。
去ってください。
>(まさかteratail約４年もやってて回答のほうが多いユーザーが編集の仕方を知らないわけがないし)
>いずれにしてもgなんとかさんすらも「初心者」として扱ってるようなので、自身の実態と状態のずれに気>づかない限り難しいでしょうね。
こういう風に他人の事を見下してコメントする奴は、大体てぇした事、ねぇ。
そういうのをランキングに乗せていい気にさせてる奴が一番悪ぃんだけどな。
>あーもうやめてやめて。
>どうせこの質問はこれ以上進まないし、そこまで有用な内容でもないし、思い込みで執拗に絡んでこられても迷惑なだけなので。
>去ってください。
おめぇが要らねぇ事言わなかったらよかったんじゃねぇのか？
んでな、話を戻すけど、
おらは質問者がなんかおもしろそうな事かんがえてんなーって思って見てたんだが、
だからLhankor_Mhy、おめぇの回答について「近い」って言ってんだろ。
おら、そういう「既成概念にとらわれない考え方」っていうのは、
とても意味があるものだと思うぞ。
すくなくとも、全否定して自分のやり方しか認めねぇmts10806の考え方は
エンジニアじゃなくてただの作業工みてぇだと思うぞ。
と言っても絡んでくる退会ユーザーはgで始まる名前でした。たぶんたくさんコメントが消えているので分からないでしょうけど、他の方のコメントにも残ってるので、そちらで。あまり読んでもためにはなりません。
Zuishinの猿真似かぁ。
かけらも面白くねぇな。やっぱりZuishinの方がおめぇよりずっと上だな。
mts10806、おめぇが普段質問者にしているのはこういう感じみてぇだぞ。
楽しいだろ？
作業工じゃない人の回答を、なぜかその人を崇拝する質問者も待ち望んでるんじゃないですかね。
私に絡んでもなにもないですよ。時間の問題なので早く回答してあげてくださいね。
それに同じと思ってるならそれはあなたの単なる主観です。そういっても認めないのでこれくらいにしてあげます。ではでは。さよなら。
> mts10806さん
> 質問者の責任は大きいと思っています。
それは異論ないです。
異論ないのですけども、質問者から補足を引き出すために「ほら、こわくない」をするというのもある意味で合理的かな、などと愚考する次第です。
私も、人のことは言えませんが。
>それは異論ないです。
>今回ついた回答を見ると質問者の意図や想い、背景が伝わる内容ではないのは明らかですし、
>質問者の責任は大きいと思っています。
別にこの質問に限ったことじゃねぇんだけんど、
おらは単純におめーらの、言われたことをそのままにしか解釈できねぇコミュニケーション障害の方が問題だと思ってんぞ。
おら、最初にこの質問見た時にそんなにおかしな事言ってるとは思わなかったし、
だからLhankor_Mhyも回答してベストアンサーもらってんだろ？
単純に、mts10806とかが言われた事そのまましか理解できねぇのが悪いんだと、おらは思うぞ。
実生活で「仕事」やってっと、mts10806みてぇに1から10まで説明してやらねぇと意図が理解できねぇやつがいて、本当に困るケースが結構あるじゃねぇか。
だからプログラマの地位がひくくなってんじゃねぇか？
UIとかは感性が重要だからさ、
コード書けるだけの頭の固いコミュニケーション障害には無理なんだと、おら、思うぞ。
Lhankor_Mhyさん
確かにそうですね。
ただ、大抵応じてくださるので、難しいところですね。ほぼ全ての質問、質問者が初見なのでお互い様みたいなところはあるでしょうけど。
どんな書き方してもすぐ退会する人はするし、応じる人は素直に応じてくれますし。それならあまり人によって変えるのも無駄かなと思うところはあります。謝られた場合などはあとで「怒ってるわけではないですよ」と付け加えることもあります。それで大抵は理解を得られてますし、私自身もルールを強要するつもりは全くなくて(公式にガイドラインがあるのだから極力守るべきとは思う)、本来は私が問題解決のために必要だと思う内容を追記してもらいたいだけなので。
それは回答者もそれぞれ経験や持ちうる技術が違う以上は誰もが主観になるでしょう。
ただ書いた内容が全てなのは誰もが同じだと思います。初心者アイコンを例にすると、知らないのか付け忘れたのか意図的につけてないのか知るすべはありませんし、
よくあるやめてほしい例が「調べたけどわかりませんでした」→「この記事はどう？」→「それは見ました」
とか、「調べてから質問したに決まってる」という流れですね。内容に何も書いてないのに。
それなら「やりたいことだけやった丸投げの質問」という低評価の項目は存在しないはずですしね。
前回は調べたかもしれないけど今回調べたかは誰もわからない。
と、ここで愚痴っても仕方ないのでこれくらいにしておきます。
長々と書いてるけど、今回の質問内容を全否定した挙げ句、
他の回答にベストアンサーがついた事の言い訳には、一切なってねぇみてぇだなぁ。
というか、mts10806さぁ、
おら、何回も言ってるけど、質問者が「あなたのコメントはもう要らないです」って言ったら
やめてやれよ、本当に。
そういう時のおめぇは、本当に気持ち悪りぃんだよ、見ていて。
> mts10806さん
イライラする質問者っていますよね。
私はコミュニケーション能力が乏しい方なので、「あ、通じないな」と感じたら切り上げて、字句どおりに回答することを意識してやってます（今回もそうです）。みなさんいろいろスタイルはあるかと思いますが、yambejpさんに近い感じかな？
> これくらいにしておきます
はい、ではでは。
ひねくれた捉え方をして長々と連投で絡まれても困りますね。無駄口叩いてる暇があったらこの質問に対する完璧な回答を用意して投稿したらどうですか。私に絡んだところでこの質問のためにも誰のためにもなりませんよ。ご自身のためだけでしたら是非やめてください。もはやなんのこだわりがあってそこまで絡んでくるのかわかりません。知りたくもないですが、「おめぇが普段質問者にしているのはこういう感じみてぇだぞ。」で用は済んだんじゃないですかね。ストレス溜まってるのでしたら私を捌け口にしないでくれませんか？余計にストレス溜まるだけですよ。それでは。ごきげんよう。じゃないや、さよなら退会ユーザーさん。
Lhankor_Mhyさん
いろいろご配慮いただいて、ありがとうございます。
私はなるべく問題解決に向かって欲しいのでひとつ突っ込んでしまうので、そこがダメな人はダメなんだなと思って切り上げる必要はあるかなと感じてはいます。一手目で見極められればいいのですけどね。
>イライラする質問者っていますよね。
イライラしてまで回答する必要ねぇだろ。
おめぇが勝手に回答してんのに、なんでイライラしてんだ？
よくわかんねぇなぁ…。
もしかして、「俺がこれだけ彼女のために尽くしたのに彼女は全く俺の事を見てくれない、許せない！」って感情なのか？
そりゃおめぇ、ストーカーだぞ。
おめぇが勝手にやりたいように回答してんだろ？
なんでイライラすんだ？
>そこがダメな人はダメなんだなと思って切り上げる必要はあるかなと感じてはいます。
ははは、全然切り上げられなくてストーキングしまくったあげく
「あなたは要らない」と再三に渡って言われても止められねぇおめぇが何言ってんだ。
相手が「あなたは要らない」と言ったらそこで切り上げればいいじゃねぇか。
ほんと、意味分かんねぇな。
↑いつまでも切り上げない（teratailから何度追い出されても戻ってきて同じことを繰り返す）人の発言がこちらです。teratailが「あなたは要らない」と言ったらそこで切り上げればいいじゃねぇか。ほんと、意味分かんねぇな。
ほんと、意味分からないね。
おー、そうだな。すげぇすげぇ。
というか、mts10806さぁ、
おら、何回も言ってるけど、質問者が「あなたのコメントはもう要らないです」って言ったら
やめてやれよ、本当に。
そういう時のおめぇは、本当に気持ち悪りぃんだよ、見ていて。
「あなたのコメントはもう要らないです」って言ったら
やめてくれよ、本当に。
いっつもおめぇは、本当に気持ち悪りぃんだよ、見ていて。
まーた猿真似かぁ。芸がねぇなぁ。
やっぱZuishinのが遥かに上だな。
あなた程度オウム返しで充分です。そんくらいもわかんねぇかー
そんなんだかからおめぇ、ベストアンサーLhankor_Mhyにとられてんだぞ、
ダセェなぁ。
んでな、話を戻すけど、
おらは質問者がなんかおもしろそうな事かんがえてんなーって思って見てたんだが、
だからLhankor_Mhyの回答について質問者は「近い」って言ってんだろ。
おら、そういう「既成概念にとらわれない考え方」っていうのは、
とても意味があるものだと思うぞ。
すくなくとも、全否定して自分のやり方しか認めねぇmts10806の考え方は
エンジニアじゃなくてただの作業工みてぇだと思うぞ。
？？？
おかしいですね。どこにも私は「ベストアンサーが欲しくてたまらない」と書いた覚えはないし、思ってもないし、言い訳もしてないですがね。どうせどう書いても「俺がそう思ったんだからそうに決まってる」と押し通すと分かってるので、詳しく弁解するのも面倒です。
さ、遊びはそろそろおしまい。もう気が済んだでしょ。もう二度と絡まないでくださいね（笑顔
>もう二度と絡まないでくださいね
質問者も、何回もそう言ってたなぁ。
今回に限らず、何人も。
んでな、話を戻すけど、
おらは質問者がなんかおもしろそうな事かんがえてんなーって思って見てたんだが、
だからLhankor_Mhyの回答について質問者は「近い」って言ってんだろ。
おら、そういう「既成概念にとらわれない考え方」っていうのは、
とても意味があるものだと思うぞ。
すくなくとも、全否定して自分のやり方しか認めねぇmts10806の考え方は
エンジニアじゃなくてただの作業工みてぇだと思うぞ。
って、何回も言ってんだけど、おめぇは都合の悪いとこは聞こえねぇフリなんだな。
>遊びはそろそろおしまい。
負けを認めたんなら勝手に終わっててもらって、おら、かまわねぇぞ。
>どこにも私は「ベストアンサーが欲しくてたまらない」と書いた覚えはないし、思ってもないし
何言ってんだおめぇ、おめぇの回答は、質問者の求めるものじゃなかった、
そう言ってんだぞ？
おめぇが何を望んでるかなんて関係ねぇ。
本当に自分の事しか考えられねぇ奴だな。
＞Lhankor_Mhyさん
イライラさせてしまって申し訳ありません。
しかしLhankor_Mhyさんは最初の回答時点からズバリ私の考えていることを100％汲み取ってくださっておりました。
また、このコメント欄でのご推察も、ほぼ全て当たっております。「zico_teratailさんは自分のデザインをけなされたと感じた」という点だけを除いて…。けなされたと感じたのではなくて、「そこは一から十まで説明しなくてもいい部分じゃない？ 質問の本質と関係なくない？」と個人的には思っていただけです。
でもせっかくこちらの意図通りの解釈と回答をしてくださったLhankor_Mhyさんをご不快な気分にさせてしまい、すみませんでした。
＞goku59さん
goku59さんのご指摘・ご推察は100％その通りです。まるで私の頭の中を覗かれたような気持ちです。私の考えていたことそのものをズバリ読み取られた感じがします。
goku59さんは決して私や特定の誰かだけに肩入れするつもりでコメントしているわけではないのだろうとは思いますが、私としては大きく助けていただいたと感じています。ありがとうございました。
これだけコメントを削除される事態を引き起こしておいて私へは何もない。
マナーも何もない（何も察することができない）方だったんですね。質問自体の方向性が悪いわけではないので本当に残念です。
なおzico_terartailさんが尊敬崇拝されているgoku59というユーザーはこのユーザーとして入会する前に過去に何度も何人も巻き込む騒動を起こしていて下記に200％あてはまる人なので、ご注意を。
「
・「やめてくれ」と言われても同じことを繰り返す
・「それは嫌がらせだ」と指摘されても認めずに居直ってまた行為を続ける
」
とはいってももう盲目になっているようなので誰が何を言っても聞かなそうですけど。
（
Lhankor_Mhyさんがわざわざこちらにコメントしてきた意図をほぼほぼ理解されていないようですし。自身が都合のいいように解釈される人なのは分かってるんで、両名追い出されるのも時間の問題で今更訂正しても無駄でしょうけど。
追い出されるということは運営と多数のユーザーから「やめてくれ」と言われたわけで、そこで再入会するということは嫌がらせに他なりません。私に何とやら言ってますが、自身はどうなんですか？
）
>これだけコメントを削除される事態を引き起こしておいて私へは何もない。
まてまて、
おめーもその騒動を起こした一味だぞ。なんで他人ヅラしてんだ、おめぇ。
>なおzico_terartailさんが尊敬崇拝されているgoku59というユーザーはこのユーザーとして入会する前に過去に何度も何人も巻き込む騒動を起こしていて下記に200％あてはまる人なので、ご注意を。
おめーも、過去に何度も「コメントしないでください」「これ以上関わらないでください」と
質問者に言われ続けた奴だろ。
何自分だけは清廉潔白です、みてぇな態度で話してんだ。おら、ぶったまげたぞ。
mts10806、おめぇは本当に自分の事しか考えてねぇみてぇだな。
> zico_teratailさん
いえ、zico_teratailさんにイライラしたわけではないですよ。口が悪いなあ、と感じましたが、私ははてなブックマーカーなのでこの程度の応酬にはなんとも感じないです。もっとひどいのがたくさんいるので。
今後ともよろしくお願いします。
これは特定の誰かに対して言うのではないのですが、人間なら誰でも感情があるはずなので、それを考慮するのが合目的な態度ではないかな、と常々思っています。もちろん、どんなスタイルをとろうと自由なのですけれども。
>何自分だけは清廉潔白です、みてぇな態度で話してんだ。おら、ぶったまげたぞ。
ここだけは全く違うので否定しておきますね。
「勝手にストーカー呼ばわりして勝手に切れておいてなんで全面被害者面なの？」というだけのことです。
（自分がやられた（と思い込んで）からやり返していいなんて理屈はどこでも通じません）
私もロボットでも何でもなく一般的に日常生活を送っている家庭もある人間で感情もありますので。話し合いも議論もなく一方的に攻撃されたと感じています。
ここが分からないようでしたら今後やり取りはお互い無益ですのでやめましょう。傍から見たらほぼ交わらない価値観の押し付け合いですし。
>「勝手にストーカー呼ばわりして勝手に切れておいてなんで全面被害者面なの？」というだけのことです。
ストーカーだろ。何言ってんだ、おめぇ。
何度「やめてくれ」って言っても聞き入れられなかったら、そりゃ、口調も荒くなるだろ。
おめぇだっておらがそうやっていたら口調が荒くなったじゃねぇか。
つまり、おめぇだって切れたじゃねぇか。
勝手に切れたんじゃねぇ。おめぇが相手が切れるような事をしたから切れたんだ。
相手がしたことは至極まっとうな事だと、おら、思うぞ。
0
少々トリッキーなやり方として、
- 枠のない
<input>（こちらが実際に入力フォームとなります）と、その外側に<div>（見た目上はこちらが枠を表示する）を用意する <input>の外側、<div>の内側に「個」を書いておく
このようにすれば、見た目上は枠内に「個」が出ているように見えますし、この「個」がデータとして混ざることはありません。。
投稿2019/06/29 05:25
総合スコア146469
Teratailのヘッダ部分にある検索ボタンは、<input>の外側にある<div>に対してposition:absoluteを使って枠内の位置に固定しているようです。
和文入力なら左側から入力しているので、ボタンを右端に固定すれば実用上問題ないですが、数値は右寄せにして、それより右側に「個」を表示したいとなると、回答に書いたように<input>と<div>の間に「個」を入れるなど、もうひと工夫が必要になるかと思います。
うーん…？
ちょっと私の意図とはご解釈が違うようです。
inputも実際には目に見える枠がありますし…（ブラウザによってレンダリングの仕方は違うとは思いますが）
> inputも実際には目に見える枠がありますし…
<div>の背景色と同じ色にしてしまえば、枠線があっても見えません。
ありがとうございます。
ちょっと私の意図が上手く伝わっていないようです。
こちらの書き方が拙くてすみません。
0
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 のコントラスト比を保証しなければなりません。
HTML
1<input type="text" placeholder="一" value="｜">
例えば、上記HTMLでは「placeholder = 一」「入力テキスト = ｜」であり、重ねてみれば「十」のように見えます。
しかし、あなたは「一」と「｜」のそれぞれに 7:1 のコントラスト比を保証し、それぞれ区別して読めるようにしなければなりません。
Re: zico_teratail さん
投稿2019/06/29 10:07
総合スコア18194
子供に交通ルールを教える方法について相談したのに、いきなり憲法を持ち出して長々とお説教をされたような、そんな気分。
> 子供に交通ルールを教える方法について相談したのに、いきなり憲法を持ち出して長々とお説教をされたような、そんな気分。
「問題のある実装」にアドバイスをするのも回答の一部と考えます。
他のコメントをざっと読む限りでは「見た目」だけの問題のようなので、私なら maisumakun さんの案を採用します。
これはアクセシビリティ上も全く問題がありません。
このコメントに関しては失礼すぎたので取り消します。
0
タグには JavaScript とありましたが、 CSS だけでも可能です。
placeholder は input にフォーカスしたり入力値がある場合は、非表示になります。ですので、フォーカス時と入力値があるときに「個」の表示を右にずらせば希望通りのことができるかと思います。
html
1<span> 2 <input type="number" name="ball" id="amount" placeholder=" "> 3 <label for="ball"></label> 4</span>
css
1span { 2 position: relative; 3} 4 5label::before { 6 content: '個'; 7 position: absolute; 8 opacity: .3; 9 left: 0; 10 right: initial; 11} 12 13input:focus + label::before { 14 right: 1.5em; 15 left: initial; 16} 17 18input:not(:placeholder-shown) + label::before { 19 right: 1.5em; 20 left: initial; 21}
追記: 上記サンプルは、 Internet Explorer と Microsoft Edge では動作しないので、 JavaScript でクラスを付け外ししたほうが実用的だと思います。
投稿2019/06/29 04:13
編集2019/06/29 04:34
総合スコア403
initialはIE11で使用できないため
IE11も対象の場合は表示が崩れるため注意が必要です。
https://caniuse.com/#feat=css-initial-value
ご指摘ありがとうございます。
あまり実用的ではないので回答に追記しておきました。
あとから追記された質問者のコメントでわかったのですが
レスポンシブサイトのスマホ用画面で使用するそうなので
今回のケースでは使用できます。
ありがとうございます。
今回bootstrap絡みのせいか、上手くいかないようです。
0
ベストアンサー
こういう話でしょうか。
サンプル
html
1<input type="number" name="ball" placeholder="個"> 2<input type="hidden" name="hiddenBall" placeholder="個">
js
1var target = document.querySelector('input[name=ball]'); 2var hiddenTarget = document.querySelector('input[name=hiddenBall]'); 3target.addEventListener('blur',function(){ 4 target.placeholder = target.value+'個'; 5 [hiddenTarget.value, target.value] = [target.value, null]; 6});
投稿2019/06/29 12:07
総合スコア37350
サンプルにJavaScriptが記載されていないです。
あれ？ set as base したはずなのに。
ありがとうございます。修正しました。
ありがとうございます！
そういうことです。表面上の事象としてはそういうことなのですが、いただいたコードですと実際のvalueとして「個」まで送られてしまいますが、そうではなくて本来のplaceholderのように、ユーザには見えてるけど実際の値としては送られない文字として表現できる方法があればなぁ、と思っております。
ただし、今回の場合ならsubmitを受け取った側で「個」を削除すればいいだけとも言えますが、バリデーション等の問題で出来れば数値だけ受け取りたいというのが本音です。
> いただいたコードですと実際のvalueとして「個」まで送られてしまいますが、そうではなくて本来のplaceholderのように、ユーザには見えてるけど実際の値としては送られない文字として表現できる方法があればなぁ、と思っております。
「見た目」だけの問題なら、maisumakun さんの回答が妥当と私は思います。
(maisumakun さんの意図が上手く伝わっていないようですが)
＞think49さん
だからmaisumakunさんの解釈は私の意図とは違うってば。
質問者本人が「それは違います」と既に言ってるのに、なんなんですか？
Lhankor_Mhyさんのご回答が私のやりたいことにもっとも近いです。
> 実際のvalueとして「個」まで送られてしまいます
そうはならないと思うのですが……
どのように確認されましたか？
> いただいたコードですと実際のvalueとして「個」まで送られてしまいますが、そうではなくて本来のplaceholderのように、ユーザには見えてるけど実際の値としては送られない文字として表現できる方法があればなぁ
当方で確認したところ、やはり、「個」は送信されていないようでした。
フォームに「5」と入力しプレースホルダが「5個」となっている状態で送信した時の、URLのパラメタ部分を提示します。
?ball=&hiddenBall=5
サンプルは↓こちらです。
https://jsfiddle.net/Lhankor_Mhy/9d53nqur/2/
zico_teratailさんの環境では、このサンプルでも
?ball=&hiddenBall=5%E5%80%8B
となりますか？
もし 5%E5%80%8B になるのであれば、環境の問題でしょう。
もし 5%E5%80%8B にならないのであれば、ご提示いただいていない部分の問題かと思われます。
ご確認ください。
すみません、私の確認ミスがありました。
元々のpost受け取り側ファイルの判定処理では「ball」の値を見ていたため、今回の検証でもそのままballを見てしまっておりました。正しくは「hiddenBall」のほうを見ないといけなかったですね。
大変失礼いたしました。
ご解決されて何よりです。
0
inputの後ろにspanでも書いて、ネガティブマージンで上に重ねる。
inputには margin-rightでも設定しておけばいいんでないの？
投稿2019/06/29 08:31
退会済みユーザー
総合スコア0
ありがとうございます。
inputに入力が予想される桁数（文字数）が固定であったり、あるいはmargin-rightがinputの入力に対して自動で可変するならば、その方法でもいいのですが…
条件後だしはないわ
「文字数・桁数が固定」という条件は最初から出してませんが・・・？？？
むしろ一般的に入力フォームにおいて固定であるほうが珍しくないですか？
例えどんな方法だって入力欄カラオケははみ出ることになるわけでしょう。
それをもってNGというのであれば回答なんてないわ
？？？
0
面白そうなので、作ってみました。
Chromeでしか確認してませんでしたが、どうやら、Chrome以外はうまくいかないようです。ブラウザによって取得できるプロパティの値とかに違いがあるので、そこら辺かも知れません。Chromeでだけで見てください。
CoffeeScript
1### 2# できていないところ 3- 高さについて微調整が必要なときがある。 4- placeholderのcolorが取得できない。 5- Google Chrome以外での動作。 6### 7 8[document.getElementsByTagName('input')...].forEach (el) -> 9 waku = document.createElement('span') 10 wakuBody = document.createElement('span') 11 wakuSuffix = document.createElement('span') 12 13 waku.appendChild(wakuBody) 14 waku.appendChild(wakuSuffix) 15 16 waku.style.pointerEvents = 'none' 17 waku.style.overflow = 'hidden' 18 waku.style.whiteSpace = 'nowrap' 19 20 waku.style.position = 'absolute' 21 boderWidth = parseFloat(getComputedStyle(el, null).getPropertyValue('border')) 22 waku.style.top = "#{el.offsetTop + boderWidth}px" 23 waku.style.left = "#{el.offsetLeft + boderWidth}px" 24 waku.style.padding = window.getComputedStyle(el, null).getPropertyValue('padding') 25 waku.style.height = window.getComputedStyle(el, null).getPropertyValue('height') 26 waku.style.width = window.getComputedStyle(el, null).getPropertyValue('width') 27 waku.style.fontSize = window.getComputedStyle(el, null).getPropertyValue('font-size') 28 waku.style.fontFamily = window.getComputedStyle(el, null).getPropertyValue('font-family') 29 waku.style.fontWeight = window.getComputedStyle(el, null).getPropertyValue('font-weight') 30 31 # スタイルの情報には無いが、上下中央添えにする。 32 # 高さとかによってはたぶん微調整が必要。 33 waku.style.verticalAlign = 'middle' 34 trueHeight = 35 parseFloat(window.getComputedStyle(el, null).getPropertyValue('height')) - 36 parseFloat(window.getComputedStyle(el, null).getPropertyValue('padding-top')) - 37 parseFloat(window.getComputedStyle(el, null).getPropertyValue('padding-bottom')) 38 waku.style.lineHeight = "#{trueHeight}px" 39 40 wakuBody.style.zIndex = -1 41 wakuBody.style.opacity = 0 42 # ::placeholderは取得できないみたい。 43 # https://stackoverflow.com/questions/52355140/get-the-correct-placeholder-color-with-js 44 # wakuSuffix.style.color = window.getComputedStyle(el, '::placeholder').getPropertyValue('color') 45 # wakuSuffix.style.opacity = window.getComputedStyle(el, '::placeholder').getPropertyValue('opacity') 46 # うまくいかないので、透明度半分で固定 47 wakuSuffix.style.opacity = 0.5 48 wakuSuffix.innerText = el.placeholder 49 el.style.zIndex = 0 50 el.placeholder = '' 51 el.parentNode.insertBefore(waku, el.nextSibling) 52 53 el.addEventListener 'input', (e) -> 54 wakuBody.innerText = e.target.value 55 56# 下はフォーム送信の確認用 57document.getElementById('form').addEventListener 'submit', (e) -> 58 e.preventDefault() 59 console.log(new URLSearchParams(new FormData(e.target)).toString())
質問者の想定しているものがいまだによく理解できていませんが、質問文の要件を満たすものが「可能」か「不可能」かでいうと、「可能」が回答になると思います。
投稿2019/07/01 11:51
編集2019/07/01 21:51
総合スコア21741
ありがとうございます！
まさに私が想定した通りの動作です。
inputタグが複数あるフォームなのですが、スマホの狭い画面でレイアウトする都合上、他のデザイン要素との兼ね合いでどうしてもラベルなどを省略せざるを得ず、今回のようなアイデアを思いついた次第です。しかしJSのことがサッパリ分かっていないので、どうやって実現したらいいものか悩んでいたところです。
同じことをよりシンプルに、という点でLhankor_Mhyさんをベストアンサーのままとさせていただきますが、raccyさんが回答してくださった内容もズバリ希望通りの動作です。
ありがとうございました。
0
<input type="text" name="ball" value="個">
これでどうでしょうか？
※注釈
フォームの出力先にも「１個」という文字列を送りたい場合
投稿2019/06/29 03:50
編集2019/06/29 05:09
総合スコア57
type=numberにvalue文字列は指定できないのでは。それにあくまで初期値なのでtype=textしても入力の妨げにしかならないように思います。
確かに、出力先の詳細を付けて修正いたしました。
回答時点、valueで「１個」と送らないといけない業務用システムの可能性もあったので。
んーそこは要件が提示されないと難しいところですね。
ユーザーが任意で編集できる入力コントロールである以上、削除もできてしまいますし、単位なら余計にシステム側で出力時に付与したほうが良さそうです
あなたの回答
tips
プレビュー
