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 相关文章推荐
关于取不到由location.href提交而来的上级页面地址的解决办法
Jul 30 Javascript
jQuery学习基础知识小结
Nov 25 Javascript
jQuery源码解读之hasClass()方法分析
Feb 20 Javascript
javascript中使用正则表达式清理table样式的代码
Apr 01 Javascript
详解AngularJS过滤器的使用
Mar 11 Javascript
seajs模块之间依赖的加载以及模块的执行
Oct 21 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
Jan 05 Javascript
jquery实现input框获取焦点的简单实例
Jan 26 Javascript
MUI实现上拉加载和下拉刷新效果
Jun 30 Javascript
js微信分享实现代码
Oct 11 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
Oct 12 Javascript
一文了解vue-router之hash模式和history模式
May 31 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
使用Apache的htaccess防止图片被盗链的解决方法
2013/04/27 PHP
php创建多级目录的方法
2015/03/24 PHP
windows下安装php的memcache模块的方法
2015/04/07 PHP
thinkPHP5.0框架命名空间详解
2017/03/18 PHP
JQuery UI DatePicker中z-index默认为1的解决办法
2010/09/28 Javascript
passwordStrength 基于jquery的密码强度检测代码使用介绍
2011/10/08 Javascript
jquery实现checkbox 全选/全不选的通用写法
2014/02/22 Javascript
用javascript将数据导入Excel示例代码
2014/09/10 Javascript
浅谈Node.js中的定时器
2015/06/18 Javascript
浅谈javascript中return语句
2015/07/15 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
Bootstrap源码解读表单(2)
2016/12/22 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
2017/01/20 Javascript
详解PHP后期静态绑定分析与应用
2018/03/21 Javascript
vue :src 文件路径错误问题的解决方法
2018/05/15 Javascript
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
js 根据对象数组中的属性进行排序实现代码
2019/09/12 Javascript
[04:52]DOTA2亚洲邀请赛附加赛 TOP10精彩集锦
2015/01/29 DOTA
[01:34:42]NAVI vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python 不关闭控制台的实现方法
2011/10/23 Python
python版本坑:md5例子(python2与python3中md5区别)
2017/06/20 Python
python进行文件对比的方法
2018/12/24 Python
Python3.5内置模块之shelve模块、xml模块、configparser模块、hashlib、hmac模块用法分析
2019/04/27 Python
python 基于TCP协议的套接字编程详解
2019/06/29 Python
基于python图书馆管理系统设计实例详解
2020/08/05 Python
scrapy与selenium结合爬取数据(爬取动态网站)的示例代码
2020/09/28 Python
python实现自动打卡的示例代码
2020/10/10 Python
PurCotton全棉时代官网:100%天然棉花生产的生活护理用品
2016/11/18 全球购物
荷兰家电销售网站:Welhof
2020/12/08 全球购物
《奇妙的国际互联网》 教学反思
2014/02/25 职场文书
中文专业求职信
2014/06/20 职场文书
2015年国庆节标语大全
2015/07/30 职场文书
Vue接口封装的完整步骤记录
2021/05/14 Vue.js
Opencv中cv2.floodFill算法的使用
2021/06/18 Python
Python日志模块logging用法
2022/06/05 Python
vue实现input输入模糊查询的三种方式
2022/08/14 Vue.js