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 跨域访问问题解决方法
Dec 02 Javascript
Javascript面向对象之四 继承
Feb 08 Javascript
js中浮点型运算BUG的解决方法说明
Jan 06 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
Oct 11 Javascript
jQuery类选择器用法实例
Dec 23 Javascript
Javascript中的几种继承方式对比分析
Mar 22 Javascript
Js动态设置rem来实现移动端字体的自适应代码
Oct 14 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
Sep 27 Javascript
angularJS1 url中携带参数的获取方法
Oct 09 Javascript
Elasticsearch实现复合查询高亮结果功能
Sep 10 Javascript
Vue.js的模板语法详解
Feb 16 Javascript
jquery实现异步文件上传ajaxfileupload.js
Oct 23 jQuery
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
mac下Apache + MySql + PHP搭建网站开发环境
2014/06/02 PHP
PHP遍历XML文档所有节点的方法
2015/03/12 PHP
Yii2实现增删改查后留在当前页的方法详解
2017/01/13 PHP
PHP递归删除多维数组中的某个值
2017/04/17 PHP
jQuery中extend函数的实现原理详解
2015/02/03 Javascript
浅析JavaScript中的事件机制
2015/06/04 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
javascript 广告移动特效的实现代码
2016/06/25 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
2017/04/10 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
2017/06/09 Javascript
Three.js开发实现3D地图的实践过程总结
2017/11/20 Javascript
可能被忽略的一些JavaScript数组方法细节
2019/02/28 Javascript
JavaScript实现雪花飘落效果
2020/12/27 Javascript
Python cookbook(数据结构与算法)保存最后N个元素的方法
2018/02/13 Python
python常用库之NumPy和sklearn入门
2019/07/11 Python
pycharm重命名文件的方法步骤
2019/07/29 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
python pip安装包出现:Failed building wheel for xxx错误的解决
2019/12/25 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
python随机模块random的22种函数(小结)
2020/05/15 Python
基于python实现操作git过程代码解析
2020/07/27 Python
MoviePy简介及Python视频剪辑自动化
2020/12/18 Python
解决PDF 转图片时丢文字的一种可能方式
2021/03/04 Python
使用HTML5 Geolocation实现一个距离追踪器
2018/04/09 HTML / CSS
全球领先的各类汽车配件零售商:Advance Auto Parts
2016/08/26 全球购物
金蝶的一道SQL笔试题
2012/12/18 面试题
优秀的自荐信要注意哪些
2014/01/03 职场文书
经典促销广告词大全
2014/03/19 职场文书
法院授权委托书格式
2014/09/28 职场文书
乡镇一岗双责责任书
2015/01/29 职场文书
2015年上半年物业工作总结
2015/03/30 职场文书
政审证明材料
2015/06/19 职场文书
pytorch中[..., 0]的用法说明
2021/05/20 Python
Linux中sftp常用命令整理
2022/06/28 Servers
微软Win11 全新照片应用面向 Dev预览版推出 新版本上手体验图集
2022/09/23 数码科技