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之旅 对象的原型链之由来
Aug 25 Javascript
js对象关系图 方便dom操作
Mar 18 Javascript
javascript中的return和闭包函数浅析
Jun 06 Javascript
Javascript字符串对象的常用方法简明版
Jun 26 Javascript
jQuery动画效果相关方法实例分析
Dec 31 Javascript
如何使用jquery修改css中带有!important的样式属性
Apr 28 Javascript
Ionic如何实现下拉刷新与上拉加载功能
Jun 03 Javascript
Javascript中的迭代、归并方法详解
Jun 14 Javascript
jQuery动态创建元素以及追加节点的实现方法
Oct 20 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
Sep 13 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
Nov 01 Javascript
javascript实现简易计算器功能
Sep 23 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
javascript document.referrer 用法
2009/04/30 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
2011/06/21 Javascript
jQuery Jcrop插件实现图片选取功能
2011/11/23 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
2012/03/04 Javascript
JavaScript中合并数组的N种方法
2014/09/16 Javascript
CSS3实现动态背景登录框的代码
2015/07/28 Javascript
纯HTML5制作围住神经猫游戏-附源码下载
2015/08/23 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
2016/01/12 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
2016/11/06 Javascript
Vue.js 和 MVVM 的注意事项
2016/11/07 Javascript
原生js轮播特效
2017/05/18 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
2017/08/16 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
2017/10/24 Javascript
element-ui 时间选择器限制范围的实现(随动)
2019/01/09 Javascript
openLayer4实现动态改变标注图标
2020/08/17 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
2020/12/04 Javascript
[07:25]DOTA2-DPC中国联赛2月5日Recap集锦
2021/03/11 DOTA
Python设计模式之代理模式实例
2014/04/26 Python
python实现sublime3的less编译插件示例
2014/04/27 Python
python求crc32值的方法
2014/10/05 Python
Python3实现Web网页图片下载
2016/01/28 Python
python进程管理工具supervisor的安装与使用教程
2017/09/05 Python
深入浅出学习python装饰器
2017/09/29 Python
详解Django rest_framework实现RESTful API
2018/05/24 Python
Python urllib.request对象案例解析
2020/05/11 Python
socket.io 和canvas 实现的共享画板功能
2019/05/22 HTML / CSS
英文简历中的自我评价
2013/10/06 职场文书
总经理助理的八要求
2013/11/12 职场文书
房地产出纳岗位职责
2013/12/01 职场文书
5s推行计划书
2014/05/06 职场文书
应届毕业生自荐信
2014/05/28 职场文书
反邪教警示教育活动总结
2015/05/09 职场文书
住房公积金贷款工资证明
2015/06/12 职场文书
工作简报怎么写
2015/07/21 职场文书
Nginx工作原理和优化总结。
2021/04/02 Servers
python基础入门之字典和集合
2021/06/13 Python