テキストボックスを自動的に大文字にするにはどうすればよいですか。

次のスタイル属性を使用してユーザー入力を大文字に設定しているため、たとえばユーザーがテキストボックスに入力し始めると 、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'/>

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

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で送信されるテキストを変更しないことに注意してください。

大文字でポストされることを保証する最も堅牢なソリューションは、oninputメソッドをインラインで使用することです。

<input oninput="this.value = this.value.toUpperCase()" />

編集

一部の人々は、値を編集するときにカーソルが最後にジャンプすると不平を言っているので、この少し拡張されたバージョンはそれを解決するはず

<input oninput="let p=this.selectionStart;this.value=this.value.toUpperCase();this.setSelectionRange(p, p);" />

text-transformation:uppercaseスタイリングでの回答は、送信時に大文字のデータをサーバーに送信しません。代わりに次のようなことができます：

入力HTMLには、onkeydownを使用します。

<input name="yourInput" onkeydown="upperCaseF(this)"/>

あなたのJavaScriptで：

function upperCaseF(a){
    setTimeout(function(){
        a.value = a.value.toUpperCase();
    }, 1);
}

upperCaseF()すべてのキーが押されるたびにfunctionを使用すると、入力の値は大文字の形式に変わります。

また、1msの遅延を追加して、キーダウンイベントの発生後にファンクションコードブロックがトリガーされるようにしました。

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

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

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

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

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

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

試す

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

画像ではなく入力にスタイルタグを入力する

次のスタイルを設定して、すべてのテキストボックスを大文字に設定します

input {text-transform: uppercase;}

CSSスタイリングの問題は、データが変更されないことです。JS関数を使用したくない場合は、試してください...

<input onkeyup="this.value = this.value.toUpperCase()" />

それ自体は、キーアップを利用してフィールドを見るので、これをstyle='text-transform:uppercase'他の人が提案したものと組み合わせることが望ましいかもしれません。

CSSを使用text-transform: uppercaseしても、実際の入力は変更されませんが、外観が変更されるだけです。入力データをサーバーに送信した場合でも、小文字のままか、ユーザーが入力したものになります。入力値を実際に変換するには、以下のようにJavaScriptコードを追加する必要があります。

document.querySelector("input").addEventListener("input", function(event) {
  event.target.value = event.target.value.toLocaleUpperCase()
})

<input>

ここではtoLocaleUpperCase()、input値を大文字に変換するために使用しています。入力した内容を編集する必要があるまで、正常に機能します。たとえば、ABCXYZを入力していて、それをABCLMNXYZに変更しようとすると、入力ごとにカーソルが最後にジャンプするため、ABCLXYZMNになります。

このカーソルのジャンプを克服するには、関数を次のように変更する必要があります。

document.querySelector("input").addEventListener("input", function(event) {
  var input = event.target;
  var start = input.selectionStart;
  var end = input.selectionEnd;
  input.value = input.value.toLocaleUpperCase();
  input.setSelectionRange(start, end);
})

<input>

これですべてが期待どおりに機能しますが、遅いPCを使用している場合、入力時にテキストが小文字から大文字にジャンプすることがあります。これがあなたを困らせたなら、今こそCSSを使う時であり、input: {text-transform: uppercase;}CSSファイルに適用し、すべてがうまくいくでしょう。

これにより、入力は大文字で表示され、入力データはポストを介して大文字で送信されます。

HTML

<input type="text" id="someInput">

JavaScript

var someInput = document.querySelector('#someInput');
someInput.addEventListener('input', function () {
    someInput.value = someInput.value.toUpperCase();
});

誰もそれを示唆していないように：

小文字のプレースホルダーでCSSソリューションを使用する場合は、プレースホルダーのスタイルを個別に設定する必要があります。IE互換性のために2つのプレースホルダースタイルを分割します。

input {
    text-transform: uppercase;
}
input:-ms-input-placeholder {
    text-transform: none;
}
input::placeholder {
    text-transform: none;
}

The below input has lowercase characters, but all typed characters are CSS-uppercased :<br/>
<input type="text" placeholder="ex : ABC" />

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

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" />

<script type="text/javascript">
    function upperCaseF(a){
    setTimeout(function(){
        a.value = a.value.toUpperCase();
    }, 1);
}
</script>

<input type="text" required="" name="partno" class="form-control" placeholder="Enter a Part No*" onkeydown="upperCaseF(this)">