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 07 Javascript
原创javascript小游戏实现代码
Aug 19 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
Apr 08 Javascript
Ajax的概述与实现过程
Nov 18 Javascript
canvas学习之API整理笔记(一)
Dec 29 Javascript
js中DOM三级列表(代码分享)
Mar 20 Javascript
JS实现移动端整屏滑动的实例代码
Nov 10 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
Dec 20 Javascript
使用webpack搭建vue项目实现脚手架功能
Mar 15 Javascript
微信小程序基于Taro的分享图片功能实践详解
Jul 12 Javascript
原生JS 实现的input输入时表格过滤操作示例
Aug 03 Javascript
浅谈javascript错误处理
Aug 11 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
smarty缓存用法分析
2014/12/16 PHP
JavaScript Title、alt提示(Tips)实现源码解读
2010/12/12 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
2014/03/19 Javascript
用原生js做个简单的滑动效果的回到顶部
2014/10/15 Javascript
Javascript中this关键字的一些小知识
2015/03/15 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
2015/06/26 Javascript
js实现超简单的展开、折叠目录代码
2015/08/28 Javascript
基于jQuery实现的扇形定时器附源码下载
2015/10/20 Javascript
javascript实现倒计时跳转页面
2016/01/17 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
2016/01/24 Javascript
JS面向对象编程详解
2016/03/06 Javascript
Bootstrap框架的学习教程详解(二)
2016/10/18 Javascript
微信小程序开发之IOS和Android兼容的问题
2017/09/26 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
2018/06/28 Javascript
详解nodejs解压版安装和配置(带有搭建前端项目脚手架)
2018/12/06 NodeJs
Vue结合路由配置递归实现菜单栏功能
2020/06/16 Javascript
C#返回当前系统所有可用驱动器符号的方法
2015/04/18 Python
Python cookbook(数据结构与算法)从任意长度的可迭代对象中分解元素操作示例
2018/02/13 Python
Django中的forms组件实例详解
2018/11/08 Python
python解析yaml文件过程详解
2019/08/30 Python
Python如何将函数值赋给变量
2020/04/28 Python
HTML5重塑Web世界它将如何改变互联网
2012/12/17 HTML / CSS
HTML5中的Scoped属性使用实例
2014/04/23 HTML / CSS
巴黎一票通:The Paris Pass
2018/02/10 全球购物
怀旧收藏品和经典纪念品:Betty’s Attic
2018/08/29 全球购物
Turnbull & Asser官网:英国皇室御用的顶级定制衬衫
2019/01/31 全球购物
美国女士内衣在线折扣商店:One Hanes Place
2019/03/24 全球购物
Cult Gaia官网:美国生活方式品牌
2019/08/16 全球购物
2014世界杯球队球队口号
2014/06/05 职场文书
县政府班子个人对照检查材料
2014/10/05 职场文书
2014年设计师工作总结
2014/11/25 职场文书
党小组考察意见
2015/06/02 职场文书
年会邀请函的格式及范文五篇
2019/11/02 职场文书
详解nginx.conf 中 root 目录设置问题
2021/04/01 Servers
python3美化表格数据输出结果的实现代码
2021/04/14 Python
微软PC Health Check电脑健康状况检查应用下载(Win11配置检测工具)
2021/06/26 数码科技