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 相关文章推荐
select组合框option的捕捉实例代码
Sep 30 Javascript
jQuery下通过replace字符串替换实现大小图片切换
May 22 Javascript
js调试系列 源码定位与调试[基础篇]
Jun 18 Javascript
jQuery中ready事件用法实例
Jan 19 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
May 03 Javascript
Bootstrap的图片轮播示例代码
Aug 31 Javascript
不定义JQuery插件 不要说会JQuery
Mar 07 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
Aug 03 Javascript
jQuery实现动态添加tr到table的方法
Dec 26 Javascript
解决vue动态为数据添加新属性遇到的问题
Sep 18 Javascript
vue使用代理解决请求跨域问题详解
Jul 24 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
Sep 06 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实现长连接的方法与注意事项的问题
2013/05/10 PHP
php cURL和Rolling cURL并发方式比较
2013/10/30 PHP
PHP使用反射机制实现查找类和方法的所在位置
2016/04/22 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
2020/04/06 PHP
jquery跟js初始化加载的多种方法及区别介绍
2014/04/02 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
使用CamanJS在Web页面上处理图像的技巧
2015/08/18 Javascript
JQuery日期插件datepicker的使用方法
2016/03/03 Javascript
canvas 实现中国象棋
2017/02/17 Javascript
详解vue项目构建与实战
2017/06/27 Javascript
js排序与重组的实例讲解
2017/08/28 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
2017/08/28 jQuery
JS基于正则表达式实现的密码强度验证功能示例
2017/09/21 Javascript
import与export在node.js中的使用详解
2017/09/28 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
2018/06/25 Javascript
微信小程序基于picker实现级联菜单
2019/02/15 Javascript
vue中使用v-model完成组件间的通信
2019/08/22 Javascript
TypeScript魔法堂之枚举的超实用手册
2020/10/29 Javascript
[00:31]2016完美“圣”典风云人物:国士无双宣传片
2016/12/04 DOTA
python爬取w3shcool的JQuery课程并且保存到本地
2017/04/06 Python
Python中定时任务框架APScheduler的快速入门指南
2017/07/06 Python
python 3.6.2 安装配置方法图文教程
2018/09/18 Python
详解python读取和输出到txt
2019/03/29 Python
Python函数和模块的使用总结
2019/05/20 Python
python使用Qt界面以及逻辑实现方法
2019/07/10 Python
Flask框架重定向,错误显示,Responses响应及Sessions会话操作示例
2019/08/01 Python
python3.6环境下安装freetype库和基本使用方法(推荐)
2020/05/10 Python
Jupyter notebook命令和编辑模式常用快捷键汇总
2020/11/17 Python
Under Armour安德玛中国官网:美国高端运动科技品牌
2018/03/09 全球购物
龟牌英国商店:Turtle Wax Brand Store UK
2019/07/02 全球购物
科学发展观标语
2014/10/08 职场文书
干部作风纪律整顿心得体会
2016/01/23 职场文书
检举信的写法
2019/04/10 职场文书
导游词之丹东鸭绿江
2019/10/24 职场文书
SONY600GR,国产收音机厂商永远的痛
2022/04/05 无线电