Input Text value 属性

Input Text 对象

修改文本域的值：

名称: <input type="text" id="myText" value="Mickey">
<p>点击按钮修改文本域的值。</p>
<button onclick="myFunction()">点我</button>
<script>
  function myFunction() {
    document.getElementById("myText").value = "Johnny Bravo";
  }
</script>

尝试一下 »

---

定义和用法

value 属性可设置或者返回文本域的 value 属性值。

value 属性包含了默认值或用户输入的值（或通过脚本设置）。

---

浏览器支持

所有主流浏览器都支持 value 属性。

---

语法

返回 value 属性：

textObject.value

设置 value 属性：

textObject.value=text

属性值

值	描述
text	轨道了文本域的初始值

技术详情

返回值：	字符串，表示文本域的默认值

---

更多实例

获取文本域的值:

名: <input type="text" id="myText" value="Mickey">
<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>

尝试一下 »

表单验证:

<form action="tryjs_submitpage.htm" onsubmit="return myFunction()">
  姓名 (最大 10 个字符): <input type="text" id="fname" size="20"><br> 年龄 (从 1 到 100): <input type="text" id="age" size="20"><br> E-mail: <input type="text" id="email" size="20"><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("不合法的 e-mail!");
      submitOK = "false";
    }
    if (submitOK == "false") {
      return false;
    }
  }
</script>

尝试一下 »

表单的下拉列表:

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

尝试一下 »

另一个下拉列表:

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

尝试一下 »

---

相关页面

HTML 参考手册: HTML <input> value 属性

---

Input Text 对象