DOM基础教程之使用DOM设置文本框


Posted in Javascript onJanuary 20, 2015

1.控制用户输入的字符个数

对于单行文本框和密码输入框,可以利用maxlength属性控制用户输入的字符个数。
对于多行文本,maxlength为自定义属性,其值最多输入的字符的个数,在onkeypress事件发生时则调运返回LessThan()函数返回值,函数如下

<textarea name="comments" id="comments" cols="40" rows="4" maxlength="50" onekeypress ="return LessThan(this);"></textarea>
详细代码

<script language="javascript">

function LessThan(oTextArea){

    //返回文本框字符个数是否符号要求的boolean值

    return oTextArea.value.length < oTextArea.getAttribute("maxlength");

}

</script>

<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" onkeypress="return LessThan(this);"></textarea></p>

<p><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" class="btn">

<input type="reset" name="btnReset" id="btnReset" value="Reset" class="btn"></p>

</form>

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

首先是鼠标经过时自动聚焦 onmouseover = "this.focus"

其次是 onfocus = "this.select()"
代码实例:

<form method="post" name="form1" id="form1" action="addInfo.aspx">

<input type="text" name="name" id="name" class="txt" value="姓名" onmouseover="this.focus()" onfocus="this.select()">

</form>

对于多个代码实例,可以使用以下代码进行聚焦

<script type="text/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>

            <form method="post" name="myForm1" action="addInfo.aspx">

                <p>

                    <label for="name">请输入您的姓名:</label>

                    <input type="text" name="name" id="name" class="txt" value="姓名">

                </p>

                <p>

                    <label for="passwd">请输入您的密码:</label>

                    <input type="password" name="passwd" id="passwd" class="txt">

                </p>

                <p>

                    <input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" class="btn">

                    <input type="reset" name="btnReset" id="btnReset" value="Reset" class="btn">

                </p>

            </form>
Javascript 相关文章推荐
理清apply(),call()的区别和关系
Aug 14 Javascript
JS增加行复制行删除行的实现代码
Nov 09 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
Oct 25 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
May 11 Javascript
详解在Vue中如何使用axios跨域访问数据
Jul 07 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
Jul 24 Javascript
webpack+vue2构建vue项目骨架的方法
Jan 09 Javascript
js实时监控文本框输入字数的实例代码
Jan 18 Javascript
JS+H5 Canvas实现时钟效果
Jul 20 Javascript
angular 表单验证器验证的同时限制输入的实现
Apr 11 Javascript
KnockoutJS数组比较算法实例详解
Nov 25 Javascript
JS模拟实现京东快递单号查询
Nov 30 Javascript
DOM基础教程之使用DOM控制表单
Jan 20 #Javascript
DOM基础教程之使用DOM控制表格
Jan 20 #Javascript
jQuery实现tag便签去重效果的方法
Jan 20 #Javascript
js实现class样式的修改、添加及删除的方法
Jan 20 #Javascript
DOM基础教程之事件类型
Jan 20 #Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
Jan 20 #Javascript
DOM基础教程之事件对象
Jan 20 #Javascript
You might like
smarty实例教程
2006/11/19 PHP
php5.3 注意事项说明
2013/07/01 PHP
php中的Base62类(适用于数值转字符串)
2013/08/12 PHP
根据中文裁减字符串函数的php代码
2013/12/03 PHP
php输出含有“#”字符串的方法
2017/01/18 PHP
PHP用正则匹配form表单中所有元素的类型和属性值实例代码
2017/02/28 PHP
PHP实现上传多图即时显示与即时删除的方法
2017/05/09 PHP
PHP合并两个或多个数组的方法
2019/01/20 PHP
Javascript 八进制转义字符(8进制)
2011/04/08 Javascript
JavaScript实现拼音排序的方法
2012/11/20 Javascript
JavaScript中的数学运算介绍
2014/12/29 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
2015/02/02 Javascript
js实现有时间限制消失的图片方法
2015/02/27 Javascript
AngularJS基础 ng-model 指令详解及示例代码
2016/08/02 Javascript
JS比较两个数值的大小实例
2016/11/25 Javascript
简单实现jQuery弹窗效果
2017/10/30 jQuery
JS函数节流和函数防抖问题分析
2017/12/18 Javascript
Vue.js递归组件构建树形菜单
2017/12/24 Javascript
js构建二叉树进行数值数组的去重与优化详解
2018/03/26 Javascript
node错误处理与日志记录的实现
2018/12/24 Javascript
一文快速了解JQuery中的AJAX
2019/05/31 jQuery
2019年度web前端面试题总结(主要为Vue面试题)
2020/01/12 Javascript
基于javascript的无缝滚动动画1
2020/08/07 Javascript
线程和进程的区别及Python代码实例
2015/02/04 Python
python数据结构之列表和元组的详解
2017/09/23 Python
如何使用VSCode愉快的写Python于调试配置步骤
2018/04/06 Python
Django发送邮件功能实例详解
2019/09/02 Python
北京天润融通.net面试题笔试题
2012/02/20 面试题
大型会议接待方案
2014/03/01 职场文书
节水口号标语
2014/06/19 职场文书
开展创先争优活动总结
2014/08/28 职场文书
超市仓管员岗位职责范本
2014/09/18 职场文书
培训通知书模板
2015/04/17 职场文书
社区义诊通知
2015/04/24 职场文书
班主任开场白
2015/06/01 职场文书
2016教师廉洁教育心得体会
2016/01/13 职场文书