HTML DOM Input Number value 属性

htmlweb developmentfront end technology更新于 2024/5/29 15:08:17

HTML DOM Input Number value 属性与 type="Number" 且具有 value 属性的输入元素相关联。此属性用于返回或设置输入元素 value 属性的值。此属性用于指定元素的默认值,也用于根据用户输入更改其值。

语法

以下是语法 −

设置 value 属性 −

numberObject.value =  number;

此处,number 用于指定数字字段的值。

示例

让我们看一个输入数字值属性的示例 −

<!DOCTYPE html>
<html>
<body>
<h1>Input Number Value property</h1>
PHONE NO: <input type="number" value="222" id="NUMBER1">
<p>Get the above element value by clicking the below button</p>
<button onclick="getValue()">Get Value</button>
<p id="Sample"></p>
<script>
   function getValue() {
      var t = document.getElementById("NUMBER1").value;
      document.getElementById("Sample").innerHTML = "The value for the input field is : "+t;
   }
</script>
</body>
</html>

输出

这将产生以下输出 −

点击"获取值"按钮后,会显示

在上面的例子中,"减号"

我们创建了一个类型为"number"的输入字段,其 ID 设置为"NUMBER1"。我们使用 value 属性为该数字字段指定了一个默认值。

PHONE NO: <input type="number" value="222" id="NUMBER1">

然后,我们创建了"获取值"按钮,当用户点击该按钮时,该按钮将执行 getValue() 方法 −

<button onclick="getValue()">Get Value</button>

getValue() 使用 getElementById() 方法获取输入元素,并将其 “value” 属性值赋给变量 t。然后,该变量将使用其 innerHTML 属性显示在 id 为 “Sample” 的段落中。 −

function getValue() {
   var t = document.getElementById("NUMBER1").value;
   document.getElementById("Sample").innerHTML = "The value for the input field is : "+t;
}

相关文章


有用资源