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 相关文章推荐
web前端设计师们常用的jQuery特效插件汇总
Dec 07 Javascript
node.js中的fs.ftruncate方法使用说明
Dec 15 Javascript
jquery制作LED 时钟特效
Feb 01 Javascript
JavaScript实现数字数组正序排列的方法
Apr 06 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
Mar 25 Javascript
详解js中call与apply关键字的作用
Nov 21 Javascript
JS库之ParticlesJS使用简介
Sep 12 Javascript
帝国cms首页列表页实现点赞功能
Oct 30 Javascript
webpack打包并将文件加载到指定的位置方法
Feb 22 Javascript
Vue动态获取width的方法
Aug 22 Javascript
JS中call()和apply()的功能及用法实例分析
Jun 28 Javascript
如何使用vue3打造一个物料库
May 08 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
详细介绍:Apache+PHP+MySQL配置攻略
2006/09/05 PHP
PHP写MySQL数据 实现代码
2009/06/15 PHP
PHP 图片上传代码
2011/09/13 PHP
php输出图像的方法实例分析
2017/02/16 PHP
获取客户端网卡MAC地址和IP地址实现JS代码
2013/03/17 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
2013/08/18 Javascript
javascript实现字符串反转的方法
2015/02/05 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
2016/01/19 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
JavaScript提升性能的常用技巧总结【经典】
2016/06/20 Javascript
Google 地图控件集详解及实例代码
2016/08/06 Javascript
详解JavaScript中this的指向问题
2017/01/20 Javascript
jQuery取得元素标签名称小结(附代码)
2017/08/16 jQuery
详解vue项目首页加载速度优化
2017/10/18 Javascript
Vue中在新窗口打开页面及Vue-router的使用
2018/06/13 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
2018/07/23 jQuery
浅谈angular表单提交中ng-submit的默认使用方法
2018/09/30 Javascript
javascript操作元素的常见方法小结
2019/11/13 Javascript
微信小程序wxml列表渲染原理解析
2019/11/27 Javascript
[06:43]DAC2018 4.5 SOLO赛 Maybe vs Paparazi
2018/04/06 DOTA
[01:14]DOTA2 7.22版本新增神杖效果展示(智力英雄篇)
2019/05/29 DOTA
浅谈python爬虫使用Selenium模拟浏览器行为
2018/02/23 Python
python如何通过twisted实现数据库异步插入
2018/03/20 Python
centos7中安装python3.6.4的教程
2019/12/11 Python
基于tensorflow指定GPU运行及GPU资源分配的几种方式小结
2020/02/03 Python
Python本地及虚拟解释器配置过程解析
2020/10/13 Python
JSF的标签库有哪些
2012/04/27 面试题
酒店led欢迎词
2014/01/09 职场文书
交警个人先进事迹材料
2014/05/11 职场文书
给公司的建议书范文
2014/05/13 职场文书
质量整改报告范文
2014/11/08 职场文书
2014年信贷员工作总结
2014/11/18 职场文书
2014年银行信贷员工作总结
2014/12/08 职场文书
职代会闭幕词
2015/01/28 职场文书
好好学习保证书
2015/02/26 职场文书
《我的长生果》教学反思
2016/02/20 职场文书