Як автоматично встановити текстове поле у ​​верхньому регістрі?

Я використовую наступний атрибут стилю, щоб встановити введення користувачем великого регістру, щоб, наприклад, коли він почав набирати текст у текстовому полі railway, його слід змінити на великі літери, як, наприклад, RAILWAY без необхідності натискання кнопки Caps-lock.

Це код, який я використовую для введення:

<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 inline на зразок:

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

EDIT

Деякі люди скаржаться, що курсор під час редагування значення стрибає до кінця, тому ця трохи розширена версія повинна вирішити це

<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()функціонуванню на кожному натисканні клавіші значення вводу перетвориться на верхню велику форму.

Я також додав затримку 1 мс, щоб блок функцій коду спрацьовував після того, як відбулася подія клавіші.

Проблема з першою відповіддю полягає в тому, що заповнювач заповнення також буде великим регістром. Якщо ви хочете, щоб ТІЛЬКИ вхід був великим, використовуйте наступне рішення.

Для того, щоб вибрати лише не порожній вхідний елемент, поставте необхідний атрибут на елемент:

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

Зараз усе працює як очікувалося, але якщо у вас повільний ПК, під час введення тексту, ви можете побачити текст, який переходить з малих літер у великі регістри. Якщо це вас дратує, настав час використовувати 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-рішення із малими заповнювачами, вам просто потрібно стилізувати заповнювачі окремо. Розділіть 2 стилі заповнювачів для сумісності з 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" />

Спробуйте нижче рішення. Це також допоможе, коли користувач вводить лише порожнє місце у полі введення при першому індексі.

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