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 ThickBox插件使用心得(不建议使用)
Sep 08 Javascript
javascript倒计时功能实现代码
Jun 07 Javascript
自己使用jquery写的一个无缝滚动的插件
Apr 30 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
Oct 10 Javascript
JavaScript中的对象的extensible属性介绍
Dec 30 Javascript
JavaScript实现在标题栏上显示当前日期的方法
Mar 19 Javascript
IScroll5 中文API参数说明和调用方法
May 21 Javascript
浅谈jQuery中ajaxPrefilter的应用
Aug 01 Javascript
JavaScript+HTML5实现的日期比较功能示例
Jul 12 Javascript
parabola.js抛物线与加入购物车效果的示例代码
Oct 25 Javascript
JavaScript实现的开关灯泡点击切换特效示例
Jul 08 Javascript
react合成事件与原生事件的相关理解
May 13 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
神族 Protoss 剧情介绍
2020/03/14 星际争霸
PHP入门速成教程
2007/03/19 PHP
discuz加密解密函数使用方法和中文注释
2014/01/21 PHP
php调用shell的方法
2014/11/05 PHP
WordPress中查询文章的循环Loop结构及用法分析
2015/12/17 PHP
PHP微信开发之模板消息回复
2016/06/24 PHP
php读取和保存base64编码的图片内容
2017/04/22 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
javascript 兼容鼠标滚轮事件
2009/04/07 Javascript
ExtJS GridPanel 根据条件改变字体颜色
2010/03/08 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
2013/05/06 Javascript
jQuery遍历Form示例代码
2013/09/03 Javascript
可自己添加html的伪弹出框实现代码
2013/09/08 Javascript
javascript实现控制文字大中小显示
2015/04/28 Javascript
Javascript中的方法和匿名方法实例详解
2015/06/13 Javascript
JavaScript代码里的判断小结
2016/08/22 Javascript
js注入 黑客之路必备!
2016/09/14 Javascript
解决Window10系统下Node安装报错的问题分析
2016/12/13 Javascript
Windows安装Node.js报错:2503、2502的解决方法
2017/10/25 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
2018/01/16 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
2018/09/12 Javascript
JQuery特殊效果和链式调用操作示例
2019/05/13 jQuery
json解析大全 双引号、键值对不在一起的情况
2019/12/06 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
2020/02/27 Javascript
举例介绍Python中的25个隐藏特性
2015/03/30 Python
PyTorch 对应点相乘、矩阵相乘实例
2019/12/27 Python
pytorch快速搭建神经网络_Sequential操作
2020/06/17 Python
大学生专科学习生活的自我评价
2013/12/07 职场文书
企事业单位求职者的自我评价
2013/12/28 职场文书
幼儿园老师寄语
2014/04/03 职场文书
总经理助理岗位职责范本
2014/07/20 职场文书
医院员工辞职信范文
2015/05/12 职场文书
行政上诉状范文
2015/05/23 职场文书
Django路由层如何获取正确的url
2021/07/15 Python
Win11怎么进入安全模式?Windows 11进入安全模式的方法
2021/11/21 数码科技
Golang jwt身份认证
2022/04/20 Golang