Как вы автоматически устанавливаете текстовое поле в верхний регистр?

Я использую следующий атрибут стиля, чтобы установить ввод пользователя в верхний регистр, чтобы, когда пользователь начинает вводить текст в текстовом поле, например 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, например:

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

Я также добавил задержку в 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, и все будет хорошо.

Это покажет ввод в верхнем регистре и отправит входные данные через post в верхнем регистре.

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