Javascript & DOM 中的文本框textbox

最新推荐文章于 2024-04-24 09:22:16 发布
最新推荐文章于 2024-04-24 09:22:16 发布
阅读量3.1k 收藏
点赞数 1
文章标签： textbox javascript input function button html

表单元素
1、文本框textbox
文本框有两种形式一种是 单行文本框<input type=”text” /> 一种是多行文本域<textarea />
使用文本输入框的时候可以限定输入字符的长度，以及文本框的长度，还有设置默认的值
<input type=”text” size=”25” maxlength=”50” value=”initial value” />
使用文本域的时候可以设置多少行多少列，以及初始值。（strict.dtd中行列数必须设定）
<textarea rows=”25” cols=”5”>initial value</textarea>

2、获取|改变文本框的值
可以看一下这个例子，通过id来获取文本框，然后获取value属性的值
<html>
<head>
<title>Retrieving a Textbox Value Example</title>
<script type=”text/javascript”>
function getValues() {
var oTextbox1 = document.getElementById(“txt1”);
var oTextbox2 = document.getElementById(“txt2”);
alert(“The value of txt1 is /”” + oTextbox1.value + “/”/n” +
“The value of txt2 is /”” + oTextbox2.value + “/””);
}
</script>
</head>
<body>
<input type=”text” size=”12” id=”txt1” /><br />
<textarea rows=”5” cols=”25” id=”txt2”></textarea><br />
<input type=”button” value=”Get Values” οnclick=”getValues()” />
</body>
</html>

下面这个例子可以获取文本框的字符串的长度。
<html>
<head>
<title>Retrieving a Textbox Length Example</title>
<script type=”text/javascript”>
function getLengths() {
var oTextbox1 = document.getElementById(“txt1”);
var oTextbox2 = document.getElementById(“txt2”);
alert(“The length of txt1 is “ + oTextbox1.value.length + “/n”
+ “The length of txt2 is “ + oTextbox2.value.length);
}
</script>
</head>
<body>
<input type=”text” size=”12” id=”txt1” /><br />
<textarea rows=”5” cols=”25” id=”txt2”></textarea><br />
<input type=”button” value=”Get Lengths” οnclick=”getLengths()” />
</body>
</html>

3、选中文本Select()，这两种文本框都支持select()方法，以选中所用文本，在使用select()之前，先要使它获得焦点focus()。虽然并非所有浏览器都要求这么做，但这样做毫无疑问是安全的。可以按以下示例，点击SelectText按钮获取 txt1文本框的值。

<html>
<head>
<title>Select Text Example</title>
<script type=”text/javascript”>
function selectText() {
var oTextbox1 = document.getElementById(“txt1”);
oTextbox1.focus();
oTextbox1.select();
}
</script>
</head>
<body>
<input type=”text” size=”12” id=”txt1” value=”initial value” /><br />
<input type=”button” value=”Select Text” οnclick=”selectText()” />
</body>
</html>

4、 文本框的事件有两个  onchange() 和onselect()
onchange()事件发生在文本框对象失去焦点的时候，检查文本是否改变。
onselect()事件发生在选中一个或多个文本的时候，以及手动调用select()方法时

从以下可以看得出 失去焦点事件发生在 onchange事件之前了。
<input type=”text” name=”textbox1” value=””
οnblur=”alert(‘Blur’)” οnchange=”alert(‘Change’)”/>
<input type=”text” name=”textbox1” value=”” οnselect=”alert(‘Select’)”/>

5、自动选中文本
很简单当文本框对象获得焦点的时候，调用this.select()方法即可
<input type=”text” οnfοcus=”this.select()” />
<textarea οnfοcus=”this.select()”></textarea>

只需改动一小部分就可以让这个方法应用于表单中所有 文本框和文本域
先获得文档中所有的 input标签跟 textarea标签，遍历input数组 如果类型为text 文本框则添加onfocus()事件 选中文本。再遍历文本域数组。
FormUtil.setTextboxes = function() {
var colInputs = document.getElementsByTagName(“input”);
var colTextAreas = document.getElementsByTagName(“textarea”);
for (var i=0; i < colInputs.length; i++){
if (colInputs[i].type == “text” || colInputs [i].type == “password”) {
colInputs[i].onfocus = function () { this.select(); };
}
}
for (var i=0; i < colTextAreas.length; i++){
colTextAreas[i].onfocus = function () { this.select(); };
}
};

6、自动跳转Tab forward automatically
在文本框中输入文本时，onkeyup检查是否到了最大限制字符数，譬如4，如果输满了4个字符则自动跳转到下一个文本框，就像我们按Tab键一样，使得下一个表单元素获得焦点。


FormUtil.tabForward = function(oTextbox) {
var oForm = oTextbox.form;
//确认当前文本框不是最后一个，且这个文本框内容达到最大数的限制
if (oForm.elements[oForm.elements.length-1] != oTextbox
&& oTextbox.value.length == oTextbox.getAttribute(“maxlength”)) {

//遍历表单元素数组，确定该元素所在的位置
for (var i=0; i < oForm.elements.length; i++) {
if (oForm.elements[i] == oTextbox) {

//找到索引位置之后，查看下一个元素是否为隐藏域，如果不是则下一个元素获得焦点。
for(var j=i+1; j < oForm.elements.length; j++) {
if (oForm.elements[j].type != “hidden”) {
oForm.elements[j].focus();
return;
}
}
return;
}
}
}
};

///这里是如何条用自动跳转

<input type=”text” id=”txtAreaCode” maxlength=”3”
οnkeyup=”FormUtil.tabForward(this)” />
<input type=”text” id=”txtExchange” maxlength=”3”
οnkeyup=”FormUtil.tabForward(this)” />
<input type=”text” id=”txtNumber” maxlength=”4”
οnkeyup=”FormUtil.tabForward(this)” />

7、限制文本域textarea的内容长度
<textarea rows=”10” cols=”25” maxlength=”150”></textarea>

8、防止输入非法字符
这里使用的方法是使用一个自定义属性invalidchars 然后使用DOM  getAttribute方法获取该属性值，然后过滤掉这些字符。
<input type=”text” invalidchars=”0123456789” />

TextUtil.blockChars = function (oTextbox, oEvent) {
oEvent = EventUtil.formatEvent(oEvent);
var sInvalidChars = oTextbox.getAttribute(“invalidchars”);
var sChar = String.fromCharCode(oEvent.charCode);
var bIsValidChar = sInvalidChars.indexOf(sChar) == -1;
return bIsValidChar || oEvent.ctrlKey;
};

<input type=”text” invalidchars=”0123456789”
οnkeypress=”return TextUtil.blockChars(this, event) “ />
<textarea rows=”10” cols=”25” invalidchars=”0123456789”
οnkeypress=”return TextUtil.blockChars(this, event)” />

9、禁止粘贴，onpaste   ctrl+v以及右键菜单的粘贴
<input type=”text” οnkeypress=”return allow(this, event) “ validchars=”0123456789”
οnpaste=”return false” οncοntextmenu=”return false” />

10、失去焦点时验证
以上验证的方法比较频繁不可取还是使用onblur()比较好了，呵呵

表单验证一般都是验证文本框了

总结：本文主要讲解了文本框的一些用法
1、两种文本框textbox，一种<input type="text" /> 一种<textarea></textarea>
2、如何获取文本框的值var oTextbox1 = document.getElementById(“txt1”);   oTextbox1.value
3、如何选中文本select()
4、文本框的事件onchange() 和 onselect()
5、自动选中文本
6、自动跳转到下一个表单元素
7、限制文本框（域）最大字符数
8、防止输入非法字符
9、禁止粘贴
10、失去焦点时验证|过滤字符串。 

hero4u
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
鼠标经过的文本框textbox变色
12-01
JS文件： 代码如下:function mouseAction() { var textInputs = document.getElementsByTagName(“input”); var len = textInputs.length; var index = 0; var textInput; /* 也能用 for in 语句遍历 for (textInput in textInputs){ textInputs[textInput].onmouseover = functionName; } */ for( index = 0; index < len; index++ ) { te
2013-5-8:Js中文本框的onchange事件
weixin_30721077的博客
05-08 208
window.onload=function(){ document.getElementById('txt1').onchange=function(){ //当文本框内容发生变话时，会在标题栏中显示文本框中的内容 document.title=this.value; };...
JavaScript：文本框脚本
山水子农
06-05 855
1、选择文本 表单脚本 var form=document.getElementById("form"); var textbox=form.elements[0];//取得表单中的第一个字段 EventUtil.addHandler(textbox,"focus",function(event){ event=EventUtil.getEvent(event);
说说 JavaScript 表单脚本之文本框
读万卷书，行万里路
07-04 1437
在 HTML 中，有两种方式表现文本框： 使用 <input> 元素表现单行文本框。 使用 <textarea> 元素表现多行文本框。 必须将 <input> 元素的 type 属性设置为 “text”，才能表现为文本框。它的 size 属性指定这个文本框能够显示的字符数；value 属性用于设置文本框的初始值；maxlength 属性指定文本框可以接受的最大字符数：<input type="te
javascript 文本框
Elna_99的博客
10-19 5625
在HTML中，有两种方式表示文本框：一种是用标签，其type值设置为text，这种设出来使单行文本框，另一种是多行文本框，使用。他们之间有一些重要的区别。 标签：通过设置size特性，能够指定显示的字符数；通过value特性，可以设置初始值；maxlength能够设置能够显示的最大字符数； 通过设置rows,cols特性可以设置行列；与标签不同，的初始值不是在特性里设置的，而是由标签包围；而且
TextBox JS前台赋值触发Onchange事件，屏蔽键盘操作
small_small_chick的专栏
09-06 3141
1.  TextBox JS前台赋值触发Onchange事件 1)     1. 用动态生成的或着Textbox时通过js给input输入框赋值，并不触发input输入框的onchange  事件可以通过以下下方式来解决。  后台C#代码： System.Web.UI.WebControls.TextBoxtextbox = new System.Web.UI.WebControls
js触发onchange事件的方法
henryzhang2009的专栏
04-18 1万+
<br />js中onchange事件是在客户端改变输入控件的值，比如一个textbox，会出发的一个事件。但是如果在js代码中改变一个textbox的value，而不是通过键盘输入改变一个textbox值的话，是不会出发onchange事件的。<br />那么，如何在js代码模式通过代码触发textbox控件的onchange事件呢，经过查阅资料，发现js提供了一个方法，可以触发控件的应该是所有事件。object.fireEvent()方法，使用方法如 object.fireEvent('onchange
用JS触发UpdatePanel里的TextBox的change事件局部刷新失败
dengli7046的博客
06-16 182
当你用JS或者Jquery去调用处于UpdatePanel里的的TextBox的onchange时，如果你发现页面的局部刷新失效了，这时候请检查你是否在TextBox上加了ClientIDMode="Static"，请去掉它，你会发现局部刷新又好了。 写下这个只是为了做个记录，如果能帮到有同样问题的人我深感荣幸，请大神不要见笑。 转载于:https://www.cnblogs.com...
js给textbox赋值，后台取值的问题
热门推荐
挨踢生涯
07-11 2万+
readonly,disabled是input的属性     ReadOnly,Enabled是ASP:TextBox的属性     要求: 客户端不能输入,但可通过js赋值,并在服务器端获取到js赋的值     前台:                                          function $(s){return document.
加载文本框TextBox
10-21
加载文本框TextBox
js控制TextBox
05-14
我收录了点js控制TextBox语句，希望对大家有用。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
js 实现 复选框和文本框的联动效果
03-31
js 实现 复选框和文本框的联动效果! 值得下载看看!资源免费,大家分享!!
JS TEXTBOX 选择输入
08-21
JS TEXTBOX 选择输入
js触发onchange事件的方法说明
12-09
js中onchange事件是在客户端改变输入控件的值，比如一个textbox，会出发的一个事件。但是如果在js代码中改变一个textbox的value，而不是通过键盘输入改变一个textbox值的话，是不会出发onchange事件的。 那么，如何在js代码模式通过代码触发textbox控件的onchange事件呢，经过查阅资料，发现js提供了一个方法，可以触发控件的应该是所有事件。object.fireEvent()方法，使用方法如 object.fireEvent(‘onchange’)，即可触发控件的onchange事件。 同理，js中使用fireEvent方法还可以触发其他的空间事件。
C# VB文本框textbox根据字符串自动调整高度
01-05
根据字符串的长度自动调整文本框的大小显示出来。自己研究了大半天终于做出来了，但是还是需要优化，因为我们的项目不适用。
Visual Studio开发环境下C#源代码，带行数和标尺的文本框TEXTBox源码
02-22
Visual Studio开发环境下C#源代码，源码，带行数和标尺的文本框TEXTBox源码，源代码，适合C#初学者做实例，或需要带行数和标尺的文本框TEXTBox的开发者，载入可以直接使用
autosize-input:精巧JavaScript中的动态宽度文本框
05-24
香草JavaScript中的动态宽度文本框，毫不费力。 动态调整文本框的宽度以适合其当前内容 可以初始化以适合其placeholder属性 （可选）根据元素的初始内容设置min-width 压缩718个字节 用法 < input type =" ...
一个小时学习javaScript
weixin_43064364的博客
04-20 822
JavaScript 是一种广泛使用的编程语言，最初被设计来增加网页的交互性，让用户能够与网页上的元素进行互动。自从1995年被引入以来，JavaScript已经发展成为Web开发中不可或缺的一部分，并且其用途已经大大扩展到了网页之外。
vue2---修饰符
最新发布
weixin_45503872的博客
04-24 726
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
JavaScript中插入文本框
06-09
在JavaScript中插入文本框可以使用以下代码： ```javascript // 创建文本框元素 var textBox = document.createElement("input"); // 设置文本框的类型为文本 textBox.type = "text"; // 添加文本框到指定元素中 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值