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 相关文章推荐
Extjs入门之动态加载树代码
Apr 09 Javascript
JavaScript中各种编码解码函数的区别和注意事项
Aug 19 Javascript
javascript中怎么做对象的类型判断
Nov 11 Javascript
直接拿来用的15个jQuery代码片段
Sep 23 Javascript
使用jQuery操作HTML的table表格的实例解析
Mar 13 Javascript
关于Jquery中的事件绑定总结
Oct 26 Javascript
详解jQuery停止动画——stop()方法的使用
Dec 14 Javascript
Extjs让combobox写起来简洁又漂亮
Jan 05 Javascript
详解Axios统一错误处理与后置
Sep 26 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
Feb 27 Javascript
解决vux 中popup 组件Mask 遮罩在最上层的问题
Nov 03 Javascript
原生JavaScript实现进度条
Feb 19 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
PHP 超链接 抓取实现代码
2009/06/29 PHP
php实现把数组按指定的个数分隔
2014/02/17 PHP
Thinkphp无限级分类代码
2015/11/11 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
jquery 多行滚动代码(附详细解释)
2010/06/17 Javascript
js实现从数组里随机获取元素
2015/01/12 Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
2020/03/26 Javascript
Node.js中npm常用命令大全
2016/06/09 Javascript
Angular中$cacheFactory的作用和用法实例详解
2016/08/19 Javascript
微信小程序 flex实现导航实例详解
2017/04/26 Javascript
jquery中有哪些api jQuery主要API
2017/11/20 jQuery
jquery的 filter()方法使用教程
2018/03/22 jQuery
jquery+php后台实现省市区联动功能示例
2019/05/23 jQuery
js获取url页面id,也就是最后的数字文件名
2020/09/25 Javascript
echarts实现晶体球面投影的实例教程
2020/10/10 Javascript
Python使用MD5加密字符串示例
2014/08/22 Python
Python中文竖排显示的方法
2015/07/28 Python
实例解析Python的Twisted框架中Deferred对象的用法
2016/05/25 Python
Python中文件I/O高效操作处理的技巧分享
2017/02/04 Python
Python简单爬虫导出CSV文件的实例讲解
2018/07/06 Python
Python 网络编程之UDP发送接收数据功能示例【基于socket套接字】
2019/10/11 Python
python读取raw binary图片并提取统计信息的实例
2020/01/09 Python
python怎么自定义捕获错误
2020/06/29 Python
paramiko使用tail实时获取服务器的日志输出详解
2020/12/06 Python
html5 input属性使用示例
2013/06/28 HTML / CSS
canvas使用注意点总结
2013/07/19 HTML / CSS
System.Array.CopyTo()和System.Array.Clone()有什么区别
2016/06/20 面试题
同步和异步有何异同,在什么情况下分别使用他们?
2012/12/28 面试题
少年闰土教学反思
2014/02/22 职场文书
环保口号大全
2014/06/12 职场文书
路政管理求职信
2014/06/18 职场文书
小学生十佳少年事迹材料
2014/08/20 职场文书
学校党员个人问题整改措施思想汇报
2014/10/08 职场文书
党的群众路线教育实践活动个人整改措施材料
2014/11/04 职场文书
vue如何使用模拟的json数据查看效果
2022/03/31 Vue.js
Python 统计序列中元素的出现频度
2022/04/26 Python