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 相关文章推荐
SOSO地图JS画出标注和中心点以html形式运行
Aug 09 Javascript
js canvas实现擦除动画
Jul 16 Javascript
jQuery实现简单的手风琴效果
Apr 17 jQuery
vue中使用localstorage来存储页面信息
Nov 04 Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
Jan 08 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
Feb 07 Javascript
js实现点击按钮复制文本功能
Jul 20 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
Oct 18 Javascript
vue多层嵌套路由实例分析
Mar 19 Javascript
JavaScript 继承 封装 多态实现及原理详解
Jul 29 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
Mar 10 Javascript
MutationObserver在页面水印实现起到的作用详解
Jul 07 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
global.php
2006/12/09 PHP
php中的filesystem文件系统函数介绍及使用示例
2014/02/13 PHP
PHP 中使用explode()函数切割字符串为数组的示例
2017/05/06 PHP
php redis setnx分布式锁简单原理解析
2020/10/23 PHP
根据经纬度计算地球上两点之间的距离js实现代码
2013/03/05 Javascript
JS加jquery简单实现标签元素的显示或隐藏
2013/09/23 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
2013/10/16 Javascript
jQuery取得iframe中元素的常用方法详解
2016/01/14 Javascript
微信小程序中页面FOR循环和嵌套循环
2017/06/21 Javascript
Angular5给组件本身的标签添加样式class的方法
2018/04/07 Javascript
记录一次开发微信网页分享的步骤
2019/05/07 Javascript
jquery+css3实现的经典弹出层效果示例
2020/05/16 jQuery
你不知道的 TypeScript 高级类型(小结)
2020/08/28 Javascript
[01:28:43]2014 DOTA2华西杯精英邀请赛5 24 DK VS CIS
2014/05/25 DOTA
[01:00]DOTA2 store: Collection of Artisan's Wonders
2015/08/12 DOTA
python检测IP地址变化并触发事件
2018/12/26 Python
python 搭建简单的http server,可直接post文件的实例
2019/01/03 Python
python实现udp传输图片功能
2020/03/20 Python
详解python3类型注释annotations实用案例
2021/01/20 Python
HTML5边玩边学(3)像素和颜色
2010/09/21 HTML / CSS
国外最大的眼镜网站:Coastal
2017/08/09 全球购物
 Alo Yoga官网:购买瑜伽服装
2018/06/17 全球购物
StubHub新西兰:购买和出售你的门票
2019/04/22 全球购物
印度第一网上礼品店:IGP.com
2020/02/06 全球购物
打架检讨书100字
2014/01/08 职场文书
初婚未育未抱养证明
2014/01/12 职场文书
会计助理岗位职责
2014/02/17 职场文书
研发工程师岗位职责
2014/04/28 职场文书
心理学专业求职信
2014/06/16 职场文书
2015年工会工作总结
2015/03/30 职场文书
雷锋的观后感
2015/06/10 职场文书
2015初中政治教学工作总结
2015/07/21 职场文书
golang内置函数len的小技巧
2021/07/25 Golang
使用PostGIS完成两点间的河流轨迹及流经长度的计算(推荐)
2022/01/18 PostgreSQL
DIY胆机必读:各国电子管评价
2022/04/06 无线电
golang生成并解析JSON
2022/04/14 Golang