Input Text value 属性
JavaScript基础 2022-06-08 16:43:00小码哥的IT人生shichen
Input Text value 属性
定义和用法
value 属性设置或返回文本字段的 value 属性的值。
HTML value 属性包含默认值或用户输入的值（或脚本设置的值）。
另请参阅：
HTML 参考手册：HTML <input> value 属性
实例
例子 1
更改文本字段的值：
document.getElementById("myText").value = "Bill Gates";
完整实例：
<!DOCTYPE html>
<html>
<body>
名字：<input type="text" id="myText" value="Bill">
<p>单击该按钮可更改文本字段的值。</p>
<button onclick="myFunction()">试一试</button>
<script>
function myFunction() {
document.getElementById("myText").value = "Steve";
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
页面下方提供更多实例。
语法
返回 value 属性：
textObject.value
设置 value 属性：
textObject.value = text
属性值
| 值 | 描述 |
|---|---|
| text | 规定输入文本字段的值。 |
技术细节
| 返回值： | 字符串值，表示文本字段的值。 |
|---|
更多实例
例子 2
获取文本字段的值：
var x = document.getElementById("myText").value;
完整实例：
<!DOCTYPE html>
<html>
<body>
名字：<input type="text" id="myText" value="Bill">
<p>单击该按钮可显示文本字段的 value 属性的值。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myText").value;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
例子 3
表单验证：
var at = document.getElementById("email").value.indexOf("@");
var age = document.getElementById("age").value;
var fname = document.getElementById("fname").value;
submitOK = "true";
if (fname.length > 10) {
alert("The name may have no more than 10 characters");
submitOK = "false";
}
if (isNaN(age) || age < 1 || age > 100) {
alert("The age must be a number between 1 and 100");
submitOK = "false";
}
if (at == -1) {
alert("Not a valid e-mail!");
submitOK = "false";
}
if (submitOK == "false") {
return false;
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<form action="/demo/htmldom/action_page.php" onsubmit="return myFunction()">
姓名（最多 10 个字符）：<input type="text" id="fname" size="20" name="fname"><br>
年龄（从 1 到 100）：<input type="text" id="age" size="20" name="age"><br>
电子邮件：<input type="text" id="email" size="20" name="mail"><br><br>
<input type="submit" value="提交">
</form>
<script>
function myFunction() {
var at = document.getElementById("email").value.indexOf("@");
var age = document.getElementById("age").value;
var fname = document.getElementById("fname").value;
submitOK = "true";
if (fname.length > 10) {
alert("名称不得超过 10 个字符");
submitOK = "false";
}
if (isNaN(age) || age < 1 || age > 100) {
alert("年龄必须是 1 到 100 之间的数字");
submitOK = "false";
}
if (at == -1) {
alert("不是有效的电子邮件地址！");
submitOK = "false";
}
if (submitOK == "false") {
return false;
}
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
例子 4
表单中的下拉列表：
var mylist = document.getElementById("myList");
document.getElementById("favorite").value = mylist.options[mylist.selectedIndex].text;
完整实例：
<!DOCTYPE html>
<html>
<body>
<form>
请选择您喜欢的浏览器：
<select id="myList" onchange="myFunction()">
<option></option>
<option>Google Chrome</option>
<option>Firefox</option>
<option>Internet Explorer</option>
<option>Safari</option>
<option>Opera</option>
</select>
<p>您喜欢的浏览器是：<input type="text" id="demo" size="20"></p>
</form>
<script>
function myFunction() {
var mylist = document.getElementById("myList");
document.getElementById("demo").value = mylist.options[mylist.selectedIndex].text;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
例子 5
另一个下拉列表：
var no = document.getElementById("no");
var option = no.options[no.selectedIndex].text;
var txt = document.getElementById("result").value;
txt = txt + option;
document.getElementById("result").value = txt;
完整实例：
<!DOCTYPE html>
<html>
<body>
<form>
请选择数字：<br>
<select id="no">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select>
<input type="button" onclick="myFunction()" value="-->">
<input type="text" id="result" size="20">
</form>
<script>
function myFunction() {
var no = document.getElementById("no");
var option = no.options[no.selectedIndex].text;
var txt = document.getElementById("result").value;
txt = txt + option;
document.getElementById("result").value = txt;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
例子 6
展示 defaultValue 和 value 属性之间差异的例子：
var x = document.getElementById("myText");
var defaultVal = x.defaultValue;
var currentVal = x.value;
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>更改文本字段的文本，然后单击下面的按钮。</p>
名字：<input type="text" id="myText" value="Bill">
<p>请注意，当您更改文本字段的值时，默认值不受影响。</p>
<button type="button" onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myText");
var defaultVal = x.defaultValue;
var currentVal = x.value;
if (defaultVal == currentVal) {
document.getElementById("demo").innerHTML = "默认值与当前值相同："
+ x.defaultValue + " 和 " + x.value
+ "<br>请更改文本字段的值以查看差异！";
} else {
document.getElementById("demo").innerHTML = "默认值为：" + defaultVal
+ "<br>新的当前值是：" + currentVal;
}
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
浏览器支持
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 支持 | 支持 | 支持 | 支持 | 支持 |
