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 相关文章推荐
Javascript和Ajax中文乱码吐血版解决方案
Dec 21 Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
Mar 06 Javascript
js实现两个值相加alert出来精确到指定位
Sep 25 Javascript
用jquery中插件dialog实现弹框效果实例代码
Nov 15 Javascript
JavaScript获取table中某一列的值的方法
May 06 Javascript
JS实现FLASH幻灯片图片切换效果的方法
Mar 04 Javascript
jQuery中Chosen三级联动功能实例代码
Mar 07 Javascript
解决vue select当前value没有更新到vue对象属性的问题
Aug 30 Javascript
vue-cli3+ts+webpack实现多入口多出口功能
May 30 Javascript
vue下axios拦截器token刷新机制的实例代码
Jan 17 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
Jan 29 Javascript
Vue常用API、高级API的相关总结
Feb 02 Vue.js
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/12/25 PHP
php中explode与split的区别介绍
2012/10/03 PHP
关于php程序报date()警告的处理(date_default_timezone_set)
2013/10/22 PHP
PHP中使用Imagick实现各种图片效果实例
2015/01/21 PHP
PHP遍历XML文档所有节点的方法
2015/03/12 PHP
详解 PHP加密解密字符串函数附源码下载
2015/12/18 PHP
PHP并发场景的三种解决方案代码实例
2021/02/27 PHP
Ajax一统天下之Dojo整合篇
2007/03/24 Javascript
JSON 教程 json入门学习笔记
2020/09/22 Javascript
js与jquery回车提交的方法
2015/02/03 Javascript
快速掌握jQuery插件WebUploader文件上传
2016/11/07 Javascript
Angular整合zTree的示例代码
2018/01/24 Javascript
JavaScript选择排序算法原理与实现方法示例
2018/08/06 Javascript
发布Angular应用至生产环境的方法
2018/12/10 Javascript
微信小程序开发实现消息推送
2020/11/18 Javascript
Vue实现导航栏点击当前标签变色功能
2020/08/19 Javascript
vue实现随机验证码功能(完整代码)
2019/12/10 Javascript
微信小程序轮播图swiper代码详解
2020/12/01 Javascript
[12:29]《一刀刀一天》之DOTA全时刻19:蝙蝠骑士田伯光再度不举
2014/06/10 DOTA
python3.6 +tkinter GUI编程 实现界面化的文本处理工具(推荐)
2017/12/20 Python
Python中时间datetime的处理与转换用法总结
2019/02/18 Python
python3 常见解密加密算法实例分析【base64、MD5等】
2019/12/19 Python
Python GUI库PyQt5样式QSS子控件介绍
2020/02/25 Python
捷克浴室和厨房设备购物网站:SIKO
2018/08/11 全球购物
学习党课思想汇报
2013/12/29 职场文书
租房协议书怎么写
2014/04/10 职场文书
毕业典礼演讲稿
2014/05/13 职场文书
廉洁教育学习材料
2014/05/19 职场文书
幸福家庭标语
2014/06/27 职场文书
工厂仓管员岗位职责范本
2014/07/17 职场文书
群众路线个人对照检查材料
2014/09/23 职场文书
2014小学教师年度考核工作总结
2014/12/03 职场文书
生死牛玉儒观后感
2015/06/11 职场文书
Redis IP地址的绑定的实现
2021/05/08 Redis
实例讲解Python中sys.argv[]的用法
2021/06/03 Python
实战 快速定位MySQL的慢SQL
2022/03/22 MySQL