JavaScript获取/更改文本框的值的实例代码
发布时间：2024-09-14 00:01:31
标签：JavaScript,文本框,值
尽管<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"。
0
投稿猜你喜欢
- 字符串函数查看字符的ascii码值ascii(str)，str是空串时返回0select ascii('a');
- 本文实例讲述了Python实现字典按照value进行排序的方法。分享给大家供大家参考，具体如下：先说几个解决的方法，具体的有时间再细说d =
有时候需要一次性将SQL Server中的数据导出给其他部门的也许进行关联或分析，这种需求对于SSIS- 1.将字符的数字转成数字，比如'0'转成0可以直接用加法来实现例如：将pony表中的d 进行排序，可d的定义为varchar
- 安装代码pip install python-docx1.批量化往word文件中添加大批量重复的数据from docx import Doc
- 本文实例讲述了PHP基于非递归算法实现先序、中序及后序遍历二叉树操作。分享给大家供大家参考，具体如下：概述：二叉树遍历原理如下：针对上图所示
- /* * zoomCheck */jQuery(function($){ var dCheck = $(&q
- 最近找遍了python的各个函数发现无法直接生成随机的二维数组，其中包括random()相关的各种方法，都没有得到想要的结果。最后在一篇博客
- 目录楔子使用方法创建一个文件创建一个目录重命名将文件1.txt移动到子目录test_child, 所以此时会伴随一个创建、一个删除以及一个修
- 1.准备代码# coding=utf-8class TestDebug: def __init__(self):
- 每天你都可能会执行许多重复的任务，例如阅读新闻、发邮件、查看天气、打开书签、清理文件夹等等，使用自动化脚本，就无需手动一次又一次地完成这些任
- 最近做了一次口碑网注册流程改造，简单说一下激活邮件的设计上的一些小心得：1、尽量不要用图片，尤其是别把激活链接做成一个点击按钮。2、尽量少的
- 前言new = old[:]Python老鸟都知道以上代码是什么意思。它复制列表old到new。它对于新手来说是种困惑而且应该避免使用这种方
- 远控终端的本质1、服务端(攻击者)传输消息 ----> socket连接 ----> 客户端(被攻击者)接收消息2、客户端执行消
- 本文实例讲述了Python3使用requests模块实现显示下载进度的方法。分享给大家供大家参考，具体如下：一、配置request1. 相关
- 学设计模式中有个装饰模式,用java实现起来不是很难,但是远远没有python简单,难怪越来越火了!这里就简单讨论下python的几种装饰模
- 我们都知道DBCC命令有点尴尬，因为你不能在T-SQL查询里调用它们，你也不能关联它们的输出到其它DMV/DMF。例如你想为每个用户会话返回
- 小计： 开发中遇到子组件需要调用兄弟组件中的方法，如下写个小demo记录下心得，如果你有好的方法，请到评论区域指教父组件示例代码：组件功能解
- 5.0版本和之前版本的差异较大，本篇对熟悉3.2版本的用户给出了一些5.0的主要区别。URL和路由5.0的URL访问不再支持普通URL模式，
- 不用整天为美化select控件烦恼了。1、可批量美化select控件。2、可以有onchange句柄。3、触发onchange的函数可带参数
