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广告实现代码
Nov 17 Javascript
JavaScript的继承的封装介绍
Oct 15 Javascript
js自定义鼠标右键的实现原理及源码
Jun 23 Javascript
探寻Javascript执行效率问题
Nov 12 Javascript
Angular的MVC和作用域
Dec 26 Javascript
JS实现隔行换色的表格排序
Mar 27 Javascript
原生JS实现圆环拖拽效果
Apr 07 Javascript
详解.vue文件解析的实现
Jun 11 Javascript
Vue 全家桶实现移动端酷狗音乐功能
Nov 16 Javascript
javascript实现异形滚动轮播
Nov 28 Javascript
vue倒计时刷新页面不会从头开始的解决方法
Mar 03 Javascript
前端实现滑动按钮AJAX与后端交互的示例代码
Feb 24 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
实用函数8
2007/11/08 PHP
PHP运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
简单谈谈php延迟静态绑定
2016/01/26 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
XHTML-Strict 内允许出现的标签
2006/12/11 Javascript
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
2008/10/29 Javascript
jquery 面包屑导航 具体实现
2013/06/05 Javascript
node.js操作mongoDB数据库示例分享
2014/11/26 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
2015/04/16 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
2015/12/08 Javascript
javascript中new关键字详解
2015/12/14 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
2016/06/24 Javascript
Node.js常用工具之util模块
2017/03/09 Javascript
Vue 组件参数校验与非props特性的方法
2019/02/12 Javascript
vue 实现input表单元素的disabled示例
2019/10/28 Javascript
[03:11]DOTA2上海特锦赛小组赛第一日recap精彩回顾
2016/02/28 DOTA
ssh批量登录并执行命令的python实现代码
2012/05/25 Python
推荐11个实用Python库
2015/01/23 Python
Python循环语句之break与continue的用法
2015/10/14 Python
Python读写txt文本文件的操作方法全解析
2016/06/26 Python
利用Celery实现Django博客PV统计功能详解
2017/05/08 Python
python 字典修改键(key)的几种方法
2018/08/10 Python
python微信聊天机器人改进版(定时或触发抓取天气预报、励志语录等,向好友推送)
2019/04/25 Python
详解mac python+selenium+Chrome 简单案例
2019/11/08 Python
python如何求100以内的素数
2020/05/27 Python
利用python爬取有道词典的方法
2020/12/08 Python
css3教程之倾斜页面
2014/01/27 HTML / CSS
详解使用双缓存解决Canvas clearRect引起的闪屏问题
2019/04/29 HTML / CSS
Shop Apotheke瑞士:您的健康与美容网上商店
2019/10/09 全球购物
面试后感谢信怎么写
2014/02/01 职场文书
创建卫生先进单位实施方案
2014/03/10 职场文书
单位工作证明范文
2014/09/14 职场文书
幼儿园毕业致辞
2015/07/29 职场文书
导游词之云南省玉龙雪山
2019/12/19 职场文书
Python移位密码、仿射变换解密实例代码
2021/06/27 Python
MySQL笔记 —SQL运算符
2022/01/18 MySQL