Jak automatycznie ustawić wielkie litery w polu tekstowym?

Używam następującego atrybutu stylu, aby ustawić dane wejściowe użytkownika na wielkie litery, aby na przykład gdy użytkownik zaczął pisać w polu tekstowym railway, powinien zostać zmieniony na wielkie litery, tak jak RAILWAY użytkownik nie musi naciskać przycisku Caps-lock.

Oto kod, którego używam do wprowadzania danych:

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

Ale nie uzyskuję pożądanego wyniku przy użyciu tego atrybutu.

Umieściłeś styleatrybut na <img>tagu, zamiast <input>.

Nie jest również dobrym pomysłem umieszczanie spacji między nazwą atrybutu a wartością ...

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

Należy pamiętać, że ta transformacja jest czysto wizualna i nie zmienia tekstu wysyłanego w POST.

Myślę, że najbardziej niezawodnym rozwiązaniem, które zapewni, że będzie pisane wielkimi literami, jest użycie wbudowanej metody oninput, takiej jak:

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

EDYTOWAĆ

Niektórzy narzekali, że kursor przeskakuje do końca podczas edycji wartości, więc ta nieco rozszerzona wersja powinna rozwiązać ten problem

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

Odpowiedzi ze text-transformation:uppercasestylizacją nie będą wysyłały danych z wielkimi literami do serwera po przesłaniu - czego można się spodziewać. Zamiast tego możesz zrobić coś takiego:

Do wprowadzania kodu HTML użyj onkeydown:

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

W Twoim JavaScript:

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

Z upperCaseF()funkcją na każdym naciśnięciu klawisza, wartość na wejściu zamieni się w wielką literę.

Dodałem również opóźnienie 1 ms, aby blok kodu funkcji wyzwalał się po wystąpieniu zdarzenia keydown.

Problem z pierwszą odpowiedzią polega na tym, że symbol zastępczy również będzie pisany dużymi literami. W przypadku, gdy chcesz, aby TYLKO wpisane były wielkie litery, użyj następującego rozwiązania.

Aby zaznaczyć tylko niepusty element wejściowy, umieść wymagany atrybut na elemencie:

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

Teraz, aby go zaznaczyć, użyj :validpseudoelementu:

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

W ten sposób wielkie litery wprowadzisz tylko do wprowadzonych znaków.

próbować

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

Zamiast obrazu umieść znacznik stylu na wejściu, ponieważ piszesz na wejściu, a nie na obrazie

Ustaw następujący styl, aby ustawić wszystkie pola tekstowe na wielkie litery

input {text-transform: uppercase;}

Problem ze stylami CSS polega na tym, że nie zmienia danych, a jeśli nie chcesz mieć funkcji JS, spróbuj ...

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

Samo zobaczysz, że pole jest wielkie po wpisaniu klucza, więc może być pożądane połączenie tego z style='text-transform:uppercase'innymi sugerowanymi.

Używanie CSS text-transform: uppercasenie zmienia rzeczywistego wejścia, a jedynie zmienia jego wygląd. Jeśli wyślesz dane wejściowe na serwer, nadal będą one pisane małymi literami lub w sposób, w jaki je wprowadziłeś. Aby faktycznie przekształcić wartość wejściową, musisz dodać kod javascript, jak poniżej:

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

<input>

Tutaj używam toLocaleUpperCase()do konwersjiinput wartości na wielkie litery. Działa dobrze, dopóki nie będziesz musiał edytować tego, co wpisałeś, np. Jeśli wprowadziłeś ABCXYZ i teraz spróbujesz zmienić to na ABCLMNXYZ, stanie się ABCLXYZMN, ponieważ po każdym wprowadzeniu kursor przeskakuje do końca.

Aby przezwyciężyć to przeskakiwanie kursora, musimy wprowadzić następujące zmiany w naszej funkcji:

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>

Teraz wszystko działa zgodnie z oczekiwaniami, ale jeśli masz wolny komputer, możesz zobaczyć tekst przeskakujący z małych na wielkie podczas pisania. Jeśli to cię denerwuje, to jest czas na użycie CSS, zastosowanie input: {text-transform: uppercase;}do pliku CSS i wszystko będzie dobrze.

Spowoduje to wyświetlenie danych wejściowych wielkimi literami i wysłanie danych wejściowych pocztą wielkimi literami.

HTML

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

JavaScript

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

Jak nikt tego nie sugerował:

Jeśli chcesz używać rozwiązania CSS z symbolami zastępczymi małymi literami, wystarczy osobno nadać styl tym symbolom zastępczym. Podziel 2 style zastępcze, aby zapewnić zgodność z 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" />

Wypróbuj poniższe rozwiązanie. Spowoduje to również zachowanie ostrożności, gdy użytkownik wprowadzi tylko puste miejsce w polu wejściowym przy pierwszym indeksie.

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