166

次のスタイル属性を使用してユーザー入力を大文字に設定し、ユーザーがテキスト ボックスに入力を開始したときに 、Caps-lock ボタンを押さなくてもrailway大文字に変更できるようにします。RAILWAY

これは私が入力に使用しているコードです:

<input type = "text" class = "normal" name = "Name" size = "20" maxlength = "20"> <img src="../images/tickmark.gif" border="0" style='text-transform:uppercase'/>

しかし、この属性を使用しても目的の出力が得られません。

4

14 に答える 14

318

の代わりにタグにstyle属性を付けました。<img><input>

属性名と値の間にスペースを入れることもお勧めできません...

<input type="text" class="normal" 
       name="Name" size="20" maxlength="20" 
       style="text-transform:uppercase" /> 
<img src="../images/tickmark.gif" border="0" />

この変換は純粋に視覚的なものであり、POST で送信されるテキストは変更されないことに注意してください。

于 2012-06-19T11:35:20.103 に答える
19

最初の答えの問題は、プレースホルダーも大文字になることです。入力のみを大文字にしたい場合は、次の解決策を使用してください。

空でない入力要素のみを選択するには、要素に必要な属性を配置します。

<input type="text" id="name-input" placeholder="Enter symbol" required="required" />

次に、それを選択するために、:valid疑似要素を使用します。

#name-input:valid { text-transform: uppercase; }

このようにして、入力した文字のみを大文字にします。

于 2016-03-22T19:13:36.350 に答える
11

試す

<input type="text" class="normal" 
       style="text-transform:uppercase" 
       name="Name" size="20" maxlength="20"> 
 <img src="../images/tickmark.gif" border="0"/>

画像ではなく入力に書いているので、画像の代わりにスタイルタグを入力に置きます

于 2012-06-19T11:35:05.460 に答える
0

以下の解決策を試してください。これは、ユーザーが最初のインデックスの入力フィールドに空白のみを入力した場合にも役立ちます。

document.getElementById('capitalizeInput').addEventListener("keyup",   () => {
  var inputValue = document.getElementById('capitalizeInput')['value']; 
  if (inputValue[0] === ' ') {
      inputValue = '';
    } else if (inputValue) {
      inputValue = inputValue[0].toUpperCase() + inputValue.slice(1);
    }
document.getElementById('capitalizeInput')['value'] = inputValue;
});
<input type="text" id="capitalizeInput" autocomplete="off" />

于 2019-04-06T07:45:11.940 に答える