JavaScript获取/更改文本框的值的实例代码
JavaScript获取/更改文本框的值的实例代码
发布时间:2016-12-30 来源:查字典编辑
摘要:尽管和是不同元素,但它们均支持同样的特性来获取包含在文本框内的文本。考虑以下例子:复制代码代码如下:RetrieyingaTextboxVa...

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

复制代码 代码如下:

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

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

</body>

</html>

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

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类