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

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

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

ОТВЕТЫ

Ответ 1

Вы поместили атрибут 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.

Ответ 2

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

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

Ответ 3

Ответы с text-transformation:uppercase стиль в 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 мс, чтобы блок функционального кода срабатывал после события нажатия клавиши.

Ответ 4

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

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

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

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

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

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

Ответ 5

пытаться

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

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

Ответ 6

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

input {text-transform: uppercase;}

Ответ 7

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

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

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

Ответ 8

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

HTML

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

JavaScript

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

Ответ 9

Как никто не предложил это:

Если вы хотите использовать решение 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" />

Ответ 10

Попробуйте приведенное ниже решение. Это также позаботится, когда пользователь вводит только пустое пространство в поле ввода в первом индексе.

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

Ответ 11

я пытаюсь использовать его внутри тега textarea, и он не работает..

  <script>
  function upperCaseF(a){
  setTimeout(function(){
    a.value = a.value.toUpperCase();
  }, 1);
  }
  </script>

 <textarea id="textarea" rows="10" cols="83 onkeydown="upperCaseF(this)">
 </textarea>

Ответ 12

Использование CSS text-transform: uppercase не изменяют фактический ввод, а только изменяют его внешний вид. Если вы отправляете входные данные на сервер, они по-прежнему будут в нижнем регистре, или вы их ввели. Чтобы действительно преобразовать входное значение, вам нужно добавить код JavaScript, как показано ниже:

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

Ответ 13

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