使用 javascript 形成文本框内容

Question

我想知道这个练习是否有更好的方法。在这里：创建一个包含文本框的表单；用户输入文本后，只要他或她单击表单中的其他地方，所有字母将立即转换为小写（提示：使用 change onChange 事件处理程序）。

我写了这段代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Event</title>
 </head>
 <body>
 <form>
     Username : <input type="text" id="username"><br>

 <input type="submit" value="button">

 </form>
 <script type="text/javascript">

 var  username = document.getElementById("username");

 username.onchange = function(){
 username.value = username.value.toLowerCase();
 };


 </script>
 </body>
 </html>

基本上我将文本框的内容替换为格式化的

Answer 1

可能太简单了，但是将样式上的文本设置为小写转换不允许大写:)

function toLower(element) {
   if (element && element.value) {
     element.value = element.value.toLowerCase();
     var target = document.getElementById('realvalue');
     target.innerHTML = element.value;
   }
}

<input type="text"  onblur="toLower(this)" />

<div id="realvalue"></div>

Answer 2

但是，如果他或她在表单中的其他位置单击时所有字母都将转换为小写，则您的代码可以正常工作... http://jsfiddle.net/b6xwde62/

 <form>
     Username : <input type="text" id="username"><br>

 <input type="submit" value="button">

 </form>
 <script type="text/javascript">
 var  username = document.getElementById("username");

 username.onchange = function(){
 username.value = username.value.toLowerCase();
 };
 </script>

使用 javascript 形成文本框内容

Form textbox content with javascript

javascript

forms

textbox