快捷導(dǎo)航

JavaScript獲取/更改文本框的值的實(shí)例代碼

更新時(shí)間：2013年08月02日 10:40:41 作者：

這篇文章介紹了JavaScript獲取/更改文本框的值的實(shí)例代碼，有需要的朋友可以參考一下

盡管<input type="text" />和<textarea />是不同元素，但它們均支持同樣的特性來獲取包含在文本框內(nèi)的文本。考慮以下例子：

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

這個(gè)例子顯示了兩個(gè)文本框，一個(gè)是單行的另一個(gè)是多行的，還有一個(gè)按鈕。當(dāng)點(diǎn)擊按鈕時(shí)，會(huì)出現(xiàn)警告框顯示各個(gè)文本框中的內(nèi)容。

也可以在兩個(gè)文本框中輸入一些內(nèi)容，然后點(diǎn)擊按鈕。

因?yàn)関alue特性是個(gè)字符串，可以使用任何字符串的特性和方法。例如，可以使用length特性來獲取文本框中的文本長(zhǎng)度：

復(fù)制代碼代碼如下:

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

這個(gè)例子中使用value的length特性來判斷每個(gè)文本框中的字符數(shù)。

這個(gè)value特性也可用于給文本框設(shè)置新內(nèi)容：

復(fù)制代碼代碼如下:

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