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 写的个性导航菜单
Dec 24 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
Mar 13 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
Oct 17 Javascript
js实现对table的增加行和删除行的操作方法
Oct 13 Javascript
JavaScript hasOwnProperty() 函数实例详解
Aug 04 Javascript
swiper 自动图片无限轮播实现代码
May 21 Javascript
小程序兼容安卓和IOS数据处理问题及坑
Sep 18 Javascript
js常见遍历操作小结
Jun 06 Javascript
13 个npm 快速开发技巧(推荐)
Jul 04 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
Nov 13 Javascript
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
vue穿梭框实现上下移动
Jan 29 Vue.js
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 图片水印类代码
2012/08/27 PHP
PHP开发工具ZendStudio下Xdebug工具使用说明详解
2013/11/11 PHP
PHP根据IP判断地区名信息的示例代码
2014/03/03 PHP
php异步:在php中使用fsockopen curl实现类似异步处理的功能方法
2016/12/10 PHP
PHP 代码简洁之道(小结)
2019/10/16 PHP
让whoops帮我们告别ThinkPHP6的异常页面
2020/03/02 PHP
Javascript中的数学函数
2007/04/04 Javascript
Javascript load Page,load css,load js实现代码
2010/03/31 Javascript
js下利用控制器载入对应脚本
2010/07/17 Javascript
Array的push与unshift方法性能比较分析
2011/03/05 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
2020/04/13 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
2014/05/20 Javascript
关于javaScript注册click事件传递参数的不成功问题
2014/07/18 Javascript
javascript 闭包详解及简单实例应用
2016/12/31 Javascript
详解JavaScript中的函数、对象
2019/04/01 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
2019/06/18 jQuery
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
three.js显示中文字体与tween应用详析
2021/01/04 Javascript
Python松散正则表达式用法分析
2016/04/29 Python
Python的几个高级语法概念浅析(lambda表达式闭包装饰器)
2016/05/28 Python
浅谈numpy数组的几种排序方式
2017/12/15 Python
Python wxPython库消息对话框MessageDialog用法示例
2018/09/03 Python
如何让python的运行速度得到提升
2020/07/08 Python
python源文件的字符编码知识点详解
2021/03/04 Python
CSS3弹性盒模型flex box快速入门心得(必看篇)
2016/05/24 HTML / CSS
全球性的在线鞋类品牌:Public Desire
2019/04/03 全球购物
应聘美工求职信
2013/11/07 职场文书
校园网站的创业计划书范文
2013/12/30 职场文书
常务副总经理岗位职责
2014/04/12 职场文书
小学秋季运动会报道稿
2014/09/30 职场文书
出纳岗位职责范本
2015/03/31 职场文书
营业员岗位职责范本
2015/04/14 职场文书
2015年小学数学教师工作总结
2015/05/20 职场文书
工作证明格式范文
2015/06/15 职场文书
JAVA SpringMVC实现自定义拦截器
2022/03/16 Python
Oracle查看表空间使用率以及爆满解决方案详解
2022/07/23 Oracle