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

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

но я не получаю желаемый результат с помощью этого атрибута.

9 83
html

9 ответов:

вы поставили на <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.

180

причина нарушена при публикации данных. Вместо этого вы можете сделать что-то вроде этого;

для ввода HTML используйте onkeydown;

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

в вашем javascript;

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

С upperCaseF() функция при каждом нажатии клавиши вниз значение ввода будет превращаться в его заглавную форму.

также я поставил задержку 1 мс, чтобы блок кода функции срабатывал после события keydown.

26

Я думаю, что самое надежное решение, которое гарантирует, что оно будет опубликовано в верхнем регистре, - это использовать метод oninput inline, например:

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

проблема с первым ответом заключается в том, что заполнитель также будет прописным. Если вы хотите, чтобы только входные данные были прописными, используйте следующее решение.

чтобы выбрать только непустой элемент ввода, поместите на элемент обязательный атрибут:

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

Теперь, чтобы выбрать его, используйте :valid псевдо-элемента:

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

таким образом, вы будете только прописные символы.

11

попробовать

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

вместо изображения поместите тег стиля на вход, потому что вы пишете на входе, а не на изображении

9

установить следующий стиль, чтобы установить все поле в верхний регистр

input {text-transform: uppercase;}
4

проблема с CSS-стилем заключается в том, что он не изменяет данные, и если вы не хотите иметь функцию JS, попробуйте...

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

на нем вы увидите, что поле капитализируется на keyup, поэтому может быть желательно объединить это с style='text-transform:uppercase' другие предложили.

1

это будет показывать ввод в верхнем регистре и отправлять входные данные через post в верхнем регистре.

HTML

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

JavaScript

var someInput = document.querySelector('#someInput');
someInput.addEventListener('input', function () {
    someInput.value = someInput.value.toUpperCase();
});
1
<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)">
0