JavaScript获取更改⽂本框的值的实例代码
尽管<input type="text" />和<textarea />是不同元素,但它们均⽀持同样的特性来获取包含在⽂本框内的⽂本。考虑以下例⼦:复制代码代码如下:
<html>
<head>
<title>Retrieying a Textbox Value Example</title>
<script type="text/javascript">
function getValues(){
var ElementById("txt1");
var ElementById("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单行文本框代码怎么写复制代码代码如下:
<html>
<head>
<title>Retrieving a Textbox Length Example</title>
<script type="text/javascript">
function getLengths(){
var ElementById("txt1");
var ElementById("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 ElementById("txt1");
var ElementById("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"。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论