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 相关文章推荐
JS中剪贴板兼容性、判断复制成功或失败
Mar 09 Javascript
浅析return false的正确使用
Nov 04 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
Dec 20 Javascript
js获取会话框prompt的返回值的方法
Jan 10 Javascript
jquery获取复选框checkbox的值实现方法
May 30 Javascript
原生JS实现几个常用DOM操作API实例
Jan 19 Javascript
微信小程序 实现点击添加移除class
Jun 12 Javascript
JavaScript之Map和Set_动力节点Java学院整理
Jun 29 Javascript
详解Node项目部署到云服务器上
Jul 12 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
Nov 19 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
Mar 23 Javascript
原生JS实现多条件筛选
Aug 19 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
用php实现的下载css文件中的图片的代码
2010/02/08 PHP
PHP类的声明与实例化及构造方法与析构方法详解
2016/01/26 PHP
PHP简单检测网址是否能够正常打开的方法
2016/09/04 PHP
Yii2设置默认控制器的两种方法
2017/05/19 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
一个多次搜索+多次传值的解决方案
2007/01/20 Javascript
编写兼容IE和FireFox的脚本
2009/05/18 Javascript
js 自定义的联动下拉框
2010/02/07 Javascript
JavaScript中实现继承的三种方式和实例
2015/01/29 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
2015/11/17 Javascript
JS使用post提交的两种方式
2015/12/03 Javascript
详谈表单格式化插件jquery.serializeJSON
2017/06/23 jQuery
详解Vuejs2.0 如何利用proxyTable实现跨域请求
2017/08/03 Javascript
深入浅析var,let,const的异同点
2018/08/07 Javascript
小试小程序云开发(小结)
2019/06/06 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
手把手带你入门微信小程序新框架Kbone的使用
2020/02/25 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
2020/07/22 Javascript
vue内置组件component--通过is属性动态渲染组件操作
2020/07/28 Javascript
jQuery列表动态增加和删除的实现方法
2020/11/05 jQuery
Python实现获取操作系统版本信息方法
2015/04/08 Python
python基于xmlrpc实现二进制文件传输的方法
2015/06/02 Python
python3 图片referer防盗链的实现方法
2018/03/12 Python
python实现鸢尾花三种聚类算法(K-means,AGNES,DBScan)
2019/06/27 Python
Python循环实现n的全排列功能
2019/09/16 Python
在 Jupyter 中重新导入特定的 Python 文件(场景分析)
2019/10/27 Python
Django models filter筛选条件详解
2020/03/16 Python
美国一家全面的在线零售鞋类公司:SHOEBACCA
2017/01/06 全球购物
COSETTE官网:奢华,每天
2020/03/22 全球购物
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
介绍一下Linux内核的排队自旋锁
2014/01/04 面试题
运动会广播稿200字
2014/01/15 职场文书
行政专员的岗位职责
2014/03/10 职场文书
共产党员岗位承诺书
2014/05/29 职场文书
教师暑期培训感言
2014/08/15 职场文书
新店开业策划方案怎么书写?
2019/07/05 职场文书