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 相关文章推荐
extjs 学习笔记(一) 一些基础知识
Oct 13 Javascript
写出更好的JavaScript之undefined篇(上)
Nov 22 Javascript
JavaScript实现动画打开半透明提示层的方法
Apr 21 Javascript
浅谈javascript中的闭包
May 13 Javascript
BootStrap表单验证实例代码
Jan 13 Javascript
Angular2 路由问题修复详解
Mar 01 Javascript
关于jQuery库冲突的完美解决办法
May 20 jQuery
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
Oct 24 Javascript
全新打包工具parcel零配置vue开发脚手架
Jan 11 Javascript
使用D3.js创建物流地图的示例代码
Jan 27 Javascript
原生js实现省市区三级联动代码分享
Feb 12 Javascript
JavaScript 监听组合按键思路及代码实现
Jul 28 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 cookie的操作实现代码(登录)
2010/12/29 PHP
JavaScript下利用fso判断文件是否存在的代码
2010/12/11 Javascript
检测jQuery.js是否已加载的判断代码
2011/05/20 Javascript
Jquery实现弹性滑块滑动选择数值插件
2015/08/08 Javascript
javascript中加var和不加var的区别 你真的懂吗
2016/01/06 Javascript
简单谈谈javascript中this的隐式绑定
2016/02/22 Javascript
JavaScript如何实现组合列表框中元素移动效果
2016/03/01 Javascript
使用JQuery 加载页面时调用JS的实现方法
2016/05/30 Javascript
使用ajaxfileupload.js实现上传文件功能
2016/08/13 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
2017/05/28 Javascript
用vuex写了一个购物车H5页面的示例代码
2018/12/04 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
2019/05/21 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
2019/10/23 jQuery
Element图表初始大小及窗口自适应实现
2020/07/10 Javascript
Python中将字典转换为XML以及相关的命名空间解析
2015/10/15 Python
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
Python金融数据可视化汇总
2017/11/17 Python
Python 实现淘宝秒杀的示例代码
2018/01/02 Python
PyQt5 pyqt多线程操作入门
2018/05/05 Python
学习python的前途 python挣钱
2019/02/27 Python
python实现连连看辅助(图像识别)
2020/03/25 Python
Python OpenCV图像指定区域裁剪的实现
2019/10/30 Python
Python爬取爱奇艺电影信息代码实例
2019/11/26 Python
python利用递归方法实现求集合的幂集
2020/09/07 Python
pytorch简介
2020/11/11 Python
有针对性的求职自荐信
2013/11/14 职场文书
教你打造完美的创业计划书
2014/01/06 职场文书
教育基金募捐倡议书
2014/05/14 职场文书
《中国梦我的梦》小学生演讲稿
2014/08/20 职场文书
护理医院见习报告
2014/11/03 职场文书
团代会闭幕词
2015/01/28 职场文书
学校捐款活动总结
2015/05/09 职场文书
如何判断微信付款码和支付宝付款码
2021/04/01 PHP
Python多线程 Queue 模块常见用法
2021/07/04 Python
Python机器学习应用之基于线性判别模型的分类篇详解
2022/01/18 Python
Valheim服务器 Mod修改安装教程 【ValheimPlus】
2022/12/24 Servers