JavaScript获取/更改文本框的值的实例代码


Posted in Javascript onAugust 02, 2013

尽管<input type="text" />和<textarea />是不同元素,但它们均支持同样的特性来获取包含在文本框内的文本。考虑以下例子:

<html>
<head>
<title>Retrieying 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" onclick="getValues()"/>
</body>
</html>

这个例子显示了两个文本框,一个是单行的另一个是多行的,还有一个按钮。当点击按钮时,会出现警告框显示各个文本框中的内容。

也可以在两个文本框中输入一些内容,然后点击按钮。

因为value特性是个字符串,可以使用任何字符串的特性和方法。例如,可以使用length特性来获取文本框中的文本长度:

<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 "onclick="getLengths()" />
</body>
</html>

这个例子中使用value的length特性来判断每个文本框中的字符数。

这个value特性也可用于给文本框设置新内容:

<html>
<head>
<title>Changing a Textbox Value Example</title>
<script type="text/javascript">
function setValues(){
var oTextbox1=document.getElementById("txt1");
var oTextbox2=document.getElementById("txt2");
oTextbox1.value="fitst textbox";
oTextbox2.value="second textbox";
}
</script>
</head>
<body>
<input type="text" size="12" id="txt1" /><br />
<textarea rows="5" cols="25" id="txt2"></textarea><br />
<input type="button " value="Set Values" onclick="setValues()" />
</body>
</html>

这个例子中,点击按钮可将第一个文本框设置为"first textbox",将第二个文本框设置为"second textbox"。
Javascript 相关文章推荐
当jQuery1.7遇上focus方法的问题
Jan 26 Javascript
AngularJS基础知识笔记之表格
May 10 Javascript
Javascript实现苹果悬浮虚拟按钮
Apr 10 Javascript
浅析JS操作DOM的一些常用方法
May 13 Javascript
jquery div模态窗口的简单实例
May 28 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
Aug 05 Javascript
几种tab切换详解
Feb 03 Javascript
JavaScript实现二分查找实例代码
Feb 22 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
js判断输入框不能为空格或null值的实现方法
Mar 02 Javascript
手把手教你写一个微信小程序(推荐)
Oct 17 Javascript
vue+animation实现翻页动画
Jun 29 Javascript
JS限制Textarea文本域字符个数的具体实现
Aug 02 #Javascript
javascript自动改变文字大小和颜色的效果的小例子
Aug 02 #Javascript
JS解决ie6下png透明的方法实例
Aug 02 #Javascript
用innerhtml提高页面打开速度的方法
Aug 02 #Javascript
JQuery 获取json数据$.getJSON方法的实例代码
Aug 02 #Javascript
可简单避免的三个JS发布错误的详细介绍
Aug 02 #Javascript
Js控制弹窗实现在任意分辨率下居中显示
Aug 01 #Javascript
You might like
用PHP制作静态网站的模板框架
2006/10/09 PHP
php空间不支持socket但支持curl时recaptcha的用法
2011/11/07 PHP
解析dedeCMS验证码的实现代码
2013/06/07 PHP
详解Yii2.0使用AR联表查询实例
2017/06/16 PHP
js判断生效时间不得大于失效时间的思路及代码
2013/04/23 Javascript
js实现二代身份证号码验证详解
2014/11/20 Javascript
JS实现关闭当前页而不弹出提示框的方法
2016/06/22 Javascript
简单理解js的冒泡排序
2016/12/19 Javascript
jQuery弹出窗口简单实现代码
2017/03/09 Javascript
JS实现显示当前日期的实例代码
2018/07/03 Javascript
Python Web框架Pylons中使用MongoDB的例子
2013/12/03 Python
Python bsddb模块操作Berkeley DB数据库介绍
2015/04/08 Python
在Python中操作时间之tzset()方法的使用教程
2015/05/22 Python
最近Python有点火? 给你7个学习它的理由!
2017/06/26 Python
python实现简单神经网络算法
2018/03/10 Python
使用Python和xlwt向Excel文件中写入中文的实例
2018/04/21 Python
python re模块的高级用法详解
2018/06/06 Python
python中计算一个列表中连续相同的元素个数方法
2018/06/29 Python
Python实现的json文件读取及中文乱码显示问题解决方法
2018/08/06 Python
Django web框架使用url path name详解
2019/04/29 Python
Python 常用模块 re 使用方法详解
2019/06/06 Python
pandas实现将日期转换成timestamp
2019/12/07 Python
Python利用逻辑回归模型解决MNIST手写数字识别问题详解
2020/01/14 Python
matlab中imadjust函数的作用及应用举例
2020/02/27 Python
Keras之自定义损失(loss)函数用法说明
2020/06/10 Python
PyCharm+Miniconda3安装配置教程详解
2021/02/16 Python
用HTML5中的Canvas结合公式绘制粒子运动的教程
2015/05/08 HTML / CSS
教师自我鉴定范文
2013/11/10 职场文书
会计电算化专业毕业生推荐信
2013/12/24 职场文书
光盘行动倡议书
2014/02/02 职场文书
小学语文国培感言
2014/03/04 职场文书
校园学雷锋活动月总结
2014/03/09 职场文书
主要领导对照检查材料
2014/08/26 职场文书
青涩记忆观后感
2015/06/18 职场文书
2016年学校招生广告语
2016/01/28 职场文书
Python中文纠错的简单实现
2021/07/07 Python