熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

JavaScript獲取/更改文本框的值

2022-06-13   來源: JSP教程 

  盡管<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"


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20350.html
    推薦文章
    Copyright © 2005-2022 電腦知識網 Computer Knowledge   All rights reserved.