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 相关文章推荐
Jquery ThickBox插件使用心得(不建议使用)
Sep 08 Javascript
根据一段代码浅谈Javascript闭包
Dec 14 Javascript
JS模拟面向对象全解(二、类型与赋值)
Jul 13 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
May 14 Javascript
jquery对象和javascript对象即DOM对象相互转换
Aug 07 Javascript
JQuery.get提交页面不跳转的解决方法
Jan 13 Javascript
jquery插件unobtrusive实现片段式加载
Jun 15 Javascript
JavaScript中offsetWidth的bug及解决方法
May 17 Javascript
简单谈谈axios中的get,post方法
Jun 25 Javascript
layui-table表复选框勾选的所有行数据获取的例子
Sep 13 Javascript
JS桶排序的简单理解与实现方法示例
Nov 25 Javascript
node使用async_hooks模块进行请求追踪
Jan 28 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
DC这些乐高系列动画电影你看过几部?
2020/04/09 欧美动漫
追求程序速度,而不是编程的速度
2008/04/23 PHP
PHP开启gzip页面压缩实例代码
2010/03/11 PHP
CodeIgniter框架过滤HTML危险代码
2014/06/12 PHP
php封装的page分页类完整实例
2016/10/18 PHP
jquery 图片上传按比例预览插件集合
2011/05/28 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
2013/07/09 Javascript
js实现图片从左往右渐变切换效果的方法
2015/02/06 Javascript
为什么JS中eval处理JSON数据要加括号
2015/04/13 Javascript
Jquery中巧用Ajax的beforeSend方法
2016/01/20 Javascript
详解JavaScript中return的用法
2017/05/08 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
2017/05/24 Javascript
react实现换肤功能的示例代码
2018/08/14 Javascript
微信公众号平台接口开发 获取access_token过程解析
2019/08/14 Javascript
javascript异常处理实现原理详解
2020/02/17 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
python输出100以内的质数与合数实例代码
2018/07/08 Python
python使用tornado实现简单爬虫
2018/07/28 Python
在Python中使用gRPC的方法示例
2018/08/08 Python
Python3 获取一大段文本之间两个关键字之间的内容方法
2018/10/11 Python
Python二叉树的镜像转换实现方法示例
2019/03/06 Python
python多进程并发demo实例解析
2019/12/13 Python
解决pycharm安装第三方库失败的问题
2020/05/09 Python
解决numpy矩阵相减出现的负值自动转正值的问题
2020/06/03 Python
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
2013/06/03 HTML / CSS
CHARLES & KEITH加拿大官网:新加坡时尚品牌
2020/03/26 全球购物
Java程序员面试题
2013/07/15 面试题
综合素质的自我鉴定
2013/10/07 职场文书
英语专业学生个人求职信
2014/01/28 职场文书
企业投资意向书
2015/05/09 职场文书
倡议书怎么写?
2019/04/11 职场文书
推荐六本经典文学奖书籍:此生必读
2019/08/22 职场文书
nginx限制并发连接请求数的方法
2021/04/01 Servers
Redis三种集群模式详解
2021/10/05 Redis
Python获取字典中某个key的value
2022/04/13 Python
python画条形图的具体代码
2022/04/20 Python