HTML Forms Text onkeyup - PullRequest
Новая
       6

HTML Forms Text onkeyup

1 голос
/ 06 декабря 2010

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

<html>
<head>
<script type="text/javascript">
function upperCase(x)
{
   var y=document.getElementById(x).value;
   document.getElementById(x).value=y.toUpperCase();
   document.getElementById("mySpan").value=y.toUpperCase();

}
</script>
</head>
<body>

Enter your name: <input type="text" id="fname" onkeyup="upperCase(this.id)">
<br/>
<span id="mySpan"></span>

</body> </html>

Но как я могу сделать так, чтобы он отображался под текстовым полем?И что, когда пользователь печатает, текст верхнего регистра отображается под текстовым полем?

Спасибо!

Ответы [ 2 ]

7 голосов
/ 06 декабря 2010

Я бы предложил следующий, более понятный подход, который использует модель регистрации событий , а не встроенную модель :

JS: 

<script>
document.getElementById("fname").onkeyup = function() {
    document.getElementById("mySpan").innerHTML = this.value.toUpperCase();   
}
</script>

Markup: 

Enter your name: <input type="text" id="fname"/>
<br/>
<span id="mySpan"></span>

Демо: http://jsfiddle.net/karim79/GPZ8h/

2 голосов
/ 11 апреля 2012

Создать класс CSS 

.showUpperCase { text-format: uppercase; }

и добавьте это в ваш span или textBox. 

<span id="mySpan" class="showUpperCase"></span>

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

...