JavaScript中获取和设置文本框值的完整示例

JavaScript获取和设置文本框值的完整示例

尽管<input type="text" />和<textarea />是两种不同的HTML元素，但它们都支持相同的特性来访问包含在文本框内的文本内容。以下是一个具体示例：

<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>

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