javascript

位置:IT落伍者 >> javascript >> 浏览文章

JavaScript获取/更改文本框的值


发布日期:2020年01月11日
 
JavaScript获取/更改文本框的值

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

<html>
<head>
<title>Retrieying a Textbox Value Example</title>
<script type="text/javascript">
function getValues(){
var oTextbox=documentgetElementById("txt");
var oTextbox=documentgetElementById("txt");
alert("The value of txt is ""+oTextboxvalue+""n"+
"The value of txt is"" +oTextboxvalue+""");
}
</script>
</head>
<body>
<input type="text" size="" id="txt" /><br/>
<textarea rows="" cols="" id="txt"></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 oTextbox=documentgetElementById("txt");
var oTextbox=documentgetElementById("txt");
alert ("The length of txt is "+oTextboxvaluelength+"n"
+"The length of txt is" +oTextboxvaluelength);
}
</script>
</head>
<body>
<input type="text" size="" id="txt"/><br />

<textarea rows="" cols="" id="txt"></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 oTextbox=documentgetElementById("txt");
var oTextbox=documentgetElementById("txt");
oTextboxvalue="fitst textbox";
oTextboxvalue="second textbox";

}
</script>
</head>
<body>
<input type="text" size="" id="txt" /><br />
<textarea rows="" cols="" id="txt"></textarea><br />
<input type="button " value="Set Values" onclick="setValues()" />
</body>
</html>


这个例子中点击按钮可将第一个文本框设置为"first textbox"将第二个文本框设置为"second textbox"

上一篇:js中方法重载如何实现?以及函数的参数问题

下一篇:JS文本框追加多个下拉框的值的简单实例