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 相关文章推荐
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
May 10 Javascript
一次失败的jQuery优化尝试小结
Feb 06 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
Apr 12 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
Oct 10 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
May 16 Javascript
详解js中==与===的区别
Jan 08 Javascript
js判断PC端与移动端跳转
Dec 24 Javascript
详解Node全局变量global模块
Sep 28 Javascript
Vue.js在数组中插入重复数据的实现代码
Nov 17 Javascript
jQuery事件委托代码实践详解
Jun 21 jQuery
JS window对象简单操作完整示例
Jan 14 Javascript
vue 移动端记录页面浏览位置的方法
Mar 11 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
PHP4之真OO
2006/10/09 PHP
php获得用户ip地址的比较不错的方法
2014/02/08 PHP
PHP+jquery+CSS制作头像登录窗(仿QQ登陆)
2016/10/20 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
PHP 计算两个时间段之间交集的天数示例
2019/10/24 PHP
PHP7修改的函数
2021/03/09 PHP
javascript实现轮显新闻标题链接
2007/08/13 Javascript
Javascript面向对象之四 继承
2011/02/08 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
2012/02/23 Javascript
利用NodeJS的子进程(child_process)调用系统命令的方法分享
2013/06/05 NodeJs
使用Jquery获取带特殊符号的ID 标签的方法
2014/04/30 Javascript
JavaScript中for循环的使用详解
2015/06/03 Javascript
jquery.validate提示错误信息位置方法
2016/01/22 Javascript
JS插件plupload.js实现多图上传并显示进度条
2016/11/29 Javascript
JS实现图片垂直居中显示小结
2016/12/13 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
2017/05/02 Javascript
使用Protocol Buffers的C语言拓展提速Python程序的示例
2015/04/16 Python
Python 高级专用类方法的实例详解
2017/09/11 Python
Python爬虫设置代理IP的方法(爬虫技巧)
2018/03/04 Python
python 正确保留多位小数的实例
2018/07/16 Python
Python实现简易过滤删除数字的方法小结
2019/01/09 Python
django 类视图的使用方法详解
2019/07/24 Python
关于PyTorch 自动求导机制详解
2019/08/18 Python
使用matplotlib动态刷新指定曲线实例
2020/04/23 Python
Python绘制数码晶体管日期
2021/02/19 Python
阿迪达斯西班牙官方网站:adidas西班牙
2016/07/21 全球购物
美国女性卫生用品公司:Thinx
2017/06/30 全球购物
武汉英思工程科技有限公司&ndash;ORACLE面试测试题目
2012/04/30 面试题
什么是重载?CTS、CLS和CLR分别做何解释
2012/05/06 面试题
探矿工程师自荐信
2014/01/24 职场文书
天网工程实施方案
2014/03/26 职场文书
交警作风整顿剖析材料
2014/10/11 职场文书
加强干部作风建设整改方案
2014/10/24 职场文书
高中教师个人总结
2015/02/10 职场文书
同学聚会开幕词
2019/04/02 职场文书
JavaScript原型链中函数和对象的理解
2022/06/16 Javascript