Bagaimana Anda mengatur kotak teks secara otomatis ke Huruf besar?

Saya menggunakan atribut style berikut untuk mengatur input pengguna ke huruf besar sehingga ketika pengguna mulai mengetik di kotak teks misalnya railway, maka itu harus diubah menjadi huruf kapital seperti RAILWAY tanpa pengguna harus menekan tombol Caps-lock.

Ini adalah kode yang saya gunakan untuk input:

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

Tapi saya tidak mendapatkan output yang diinginkan dengan menggunakan atribut ini.

Anda telah meletakkan styleatribut pada <img>tag, alih-alih <input>.

Ini juga bukan ide yang baik untuk memiliki spasi antara nama atribut dan nilai ...

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

Harap dicatat transformasi ini murni visual, dan tidak mengubah teks yang dikirim dalam POST.

Saya pikir solusi paling kuat yang akan memastikan bahwa itu diposting dalam huruf besar adalah dengan menggunakan metode ininput seperti:

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

EDIT

Beberapa orang mengeluh bahwa kursor melompat ke ujung saat mengedit nilai, jadi versi yang sedikit diperluas ini harus menyelesaikannya

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

Jawaban dengan text-transformation:uppercasepenataan tidak akan mengirim data yang lebih besar ke server saat dikirim - apa yang Anda harapkan. Anda dapat melakukan sesuatu seperti ini sebagai gantinya:

Untuk input HTML Anda gunakan onkeydown:

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

Dalam JavaScript Anda:

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

Dengan upperCaseF()fungsi pada setiap tombol ditekan, nilai input akan berubah menjadi bentuk huruf besar.

Saya juga menambahkan penundaan 1ms sehingga blok kode fungsi memicu setelah peristiwa keydown terjadi.

Masalah dengan jawaban pertama adalah bahwa placeholder akan menjadi huruf besar juga. Jika Anda HANYA ingin input huruf besar, gunakan solusi berikut.

Untuk memilih hanya elemen input yang tidak kosong, berikan atribut yang diperlukan pada elemen:

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

Sekarang, untuk memilihnya, gunakan :validelemen pseudo:

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

Dengan cara ini Anda hanya akan menggunakan huruf besar karakter yang dimasukkan.

mencoba

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

Alih-alih menempatkan tag gaya gambar pada input karena Anda menulis pada input bukan pada gambar

Setel gaya berikut untuk mengatur semua kotak teks menjadi huruf besar

input {text-transform: uppercase;}

Masalah dengan CSS Styling adalah bahwa itu tidak mengubah data, dan jika Anda tidak ingin memiliki fungsi JS maka coba ...

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

pada itu sendiri Anda akan melihat bidang memanfaatkan keyup, jadi mungkin diinginkan untuk menggabungkan ini dengan yang style='text-transform:uppercase'lain telah menyarankan.

Menggunakan CSS text-transform: uppercasetidak mengubah input aktual tetapi hanya mengubah tampilannya. Jika Anda mengirim data input ke server masih akan huruf kecil atau Anda memasukkannya. Untuk benar-benar mengubah nilai input Anda perlu menambahkan kode javascript seperti di bawah ini:

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

<input>

Di sini saya menggunakan toLocaleUpperCase()untuk mengubah inputnilai menjadi huruf besar. Ini berfungsi dengan baik sampai Anda perlu mengedit apa yang Anda masukkan, misalnya jika Anda telah memasukkan ABCXYZ dan sekarang Anda mencoba mengubahnya menjadi ABCLMNXYZ, itu akan menjadi ABCLXYZMN karena setelah setiap input kursor melompat ke ujung.

Untuk mengatasi lompatan kursor ini, kita harus membuat perubahan fungsi berikut:

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>

Sekarang semuanya berfungsi seperti yang diharapkan, tetapi jika Anda memiliki PC lambat Anda mungkin melihat teks melompat dari huruf kecil ke huruf besar saat Anda mengetik. Jika ini mengganggu Anda, ini saatnya menggunakan CSS, melamar input: {text-transform: uppercase;}ke file CSS dan semuanya akan baik-baik saja.

Ini akan menampilkan input dalam huruf besar dan mengirim data input melalui pos dalam huruf besar.

HTML

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

JavaScript

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

Seperti yang tidak disarankan oleh siapa pun:

Jika Anda ingin menggunakan solusi CSS dengan placeholder huruf kecil, Anda hanya perlu mendesain placeholder secara terpisah. Pisahkan 2 gaya placeholder untuk kompatibilitas IE.

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

Coba solusi di bawah ini, Ini juga akan berhati-hati ketika pengguna hanya memasukkan ruang kosong di bidang input pada indeks pertama.

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