Metin kutusunu otomatik olarak Büyük Harfe nasıl ayarlarsınız?

Kullanıcı girişini büyük harfe ayarlamak için aşağıdaki stil özelliğini kullanıyorum, böylece kullanıcı, örneğin metin kutusuna yazmaya başladığında , kullanıcının Caps-lock düğmesine basmasına gerek kalmadan railwaybüyük harflerle değiştirilmelidir RAILWAY.

Giriş için kullandığım kod bu:

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

Ama bu özniteliği kullanarak istediğim çıktıyı alamıyorum.

Sen koyduk styleüzerinde niteliği <img>yerine, etiketi <input>.

Öznitelik adı ile değer arasında boşluk olması da iyi bir fikir değildir ...

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

Lütfen bu dönüşümün tamamen görsel olduğunu ve POST'ta gönderilen metni değiştirmediğini unutmayın .

Bence büyük harfle gönderilmesini sağlayacak en sağlam çözüm, oninput yöntemini aşağıdaki gibi satır içi kullanmaktır:

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

DÜZENLE

Bazı insanlar, değeri düzenlerken imlecin sona atladığından şikayet ediyorlar, bu nedenle bu biraz genişletilmiş sürüm bunu çözmeli

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

text-transformation:uppercaseStil ile verilen yanıtlar , sunma sırasında sunucuya büyük harfli verileri göndermeyecektir - ne bekleyebilirsiniz. Bunun yerine bunun gibi bir şey yapabilirsiniz:

HTML girişiniz için onkeydown kullanın:

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

JavaScript'inizde:

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

İle upperCaseF()her tuşa basma üzerinde aşağı fonksiyonu, girişin değeri büyük harf forma çevirmek için gidiyor.

Ayrıca 1 ms'lik bir gecikme ekledim, böylece işlev kodu bloğu, tuşa basma olayı gerçekleştikten sonra tetiklenir.

İlk yanıtla ilgili sorun, yer tutucunun da büyük harf olacağıdır. YALNIZCA girdinin büyük harf olmasını istiyorsanız, aşağıdaki çözümü kullanın.

Yalnızca boş olmayan giriş öğesini seçmek için öğeye gerekli özniteliği girin:

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

Şimdi, onu seçmek için :validsözde öğeyi kullanın :

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

Bu şekilde yalnızca girilen karakterleri büyük harfle yazarsınız.

Deneyin

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

Görüntü yerine girdi üzerine stil etiketi koyun çünkü görüntüye değil girdiye yazıyorsunuz

Tüm metin kutusunu büyük harfe ayarlamak için aşağıdaki stili ayarlayın

input {text-transform: uppercase;}

CSS Styling ile ilgili sorun, verileri değiştirmemesidir ve bir JS işlevine sahip olmak istemiyorsanız, deneyin ...

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

kendi başına, alanın anahtarlamadan yararlandığını göreceksiniz, bu nedenle bunu style='text-transform:uppercase'diğerlerinin önerdiği ile birleştirmek istenebilir .

CSS kullanmak text-transform: uppercasegerçek girdiyi değiştirmez, yalnızca görünümünü değiştirir. Giriş verilerini bir sunucuya gönderirseniz, yine de küçük harfe veya nasıl girerseniz girin. Girdi değerini gerçekten dönüştürmek için aşağıdaki gibi javascript kodu eklemeniz gerekir:

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

<input>

Burada değeri büyük harfe toLocaleUpperCase()dönüştürmek inputiçin kullanıyorum . Girdiklerinizi düzenlemeniz gerekene kadar sorunsuz çalışır, örneğin ABCXYZ girdiyseniz ve şimdi onu ABCLMNXYZ olarak değiştirmeye çalışırsanız, ABCLXYZMN olur çünkü her girişten sonra imleç sona atlar.

İmlecin bu atlamasının üstesinden gelmek için, fonksiyonumuzda aşağıdaki değişiklikleri yapmalıyız:

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>

Artık her şey beklendiği gibi çalışıyor, ancak yavaş PC'niz varsa, yazarken küçük harften büyük harfe atlanan metni görebilirsiniz. Bu sizi rahatsız ediyorsa, şimdi CSS kullanma, input: {text-transform: uppercase;}CSS dosyasına uygulama zamanı ve her şey yoluna girecek.

Bu hem girişi büyük harfle gösterecek hem de giriş verilerini yazı yoluyla büyük harfle gönderecektir.

HTML

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

JavaScript

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

Kimsenin önermediği gibi:

CSS çözümünü küçük harfli yer tutucularla kullanmak istiyorsanız, yer tutucuları ayrı ayrı biçimlendirmeniz yeterlidir. IE uyumluluğu için 2 yer tutucu stilini bölün.

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

Aşağıdaki çözümü deneyin, Bu, bir kullanıcı ilk dizindeki giriş alanında yalnızca boş alana girdiğinde de dikkat edecektir.

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