JavaScript 控制文本框和文本域_编码文章

文本框是表单中与用户打交道最多的元素之一,它包括单行文本框和多行文本框,</p><p data-track='2'>更广义的还可以包括密码输入框<input type='password'>。</p><p data-track='3'>控制用户输入字符个数</p><p data-track='4'>对于单行文本框<input type='text'>和密码输入框<input type='password'>而言,可以利用自身的maxlength属性控制用户输入字符的个数;</p><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code><input type='text' name='name' id='name' class='txt' value='姓名' maxlength='10' /></code></pre><p data-track='6'>而对于多行文本框<textarea>没有类似的属性,可以自定义类似的属性,并对onkeypress事件做相应的处理</p><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code><textarea name='comments' id='comments' cols='40' rows='4' maxlength='50'>

以上代码中maxlength为自定义属性(标签中没有这个maxlength属性),其值为最多允许输入的字符的个数,</p><p data-track='9'>在onkeypress事件发生时则调用返回LessThan()函数的返回值,函数如下:</p><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code>function LessThan(oTextArea){ //返回文本框字符个数是否符号要求的boolean值 return oTextArea.value.length < oTextArea.getAttribute("maxlength"); }</code></pre><p data-track='14'>实例:</p><pre class="prism-highlight prism-language-bash" class='syl-page-code'><code><html> <head> <title>控制textarea的字符个数</title> <style> </style> <script language="javascript"> function LessThan(oTextArea){ //返回文本框字符个数是否符号要求的boolean值 return oTextArea.value.length < oTextArea.getAttribute("maxlength"); } </script> </head> <body> <form method='post' name='myForm1' action='addInfo.aspx'> <p><label for='name'>请输入您的姓名:</label> <input type='text' name='name' id='name' class='txt' value='姓名' maxlength='10'></p> <p><label for='comments'>我要留言:</label><br> <textarea name='comments' id='comments' cols='40' rows='4' maxlength='50'>

设置鼠标经过时自动选择文本

通常是在用户名、密码等文本框中希望鼠标指针经过时自动聚焦，并且能够选中默认值以便用户直接删除。

首先是鼠标指针经过时自动聚焦，代码如下

onmouseover="this.focus()"

其次是聚焦后自动选中所有文本，代码如下：

onfocus="this.select()"

如:请输入您的姓名:

javascript分离实现自动选择文本

<script language="javascript">
function myFocus(){
    this.focus();
}
function mySelect(){
    this.select();
}
window.onload = function(){
    var oForm = document.forms["myForm1"];
    oForm.name.onmouseover = myFocus;
    oForm.name.onfocus = mySelect;
}
</script>

JavaScript 控制文本框和文本域

相关文章