HTML DOM Input Search defaultValue 属性
htmlweb developmentfront end technology更新于 2024/5/29 3:24:17
HTML DOM Input Search defaultValue 属性用于设置或获取搜索字段的默认值。元素的 defaultValue 是分配给 value 属性的值。value 和 defaultValue 属性之间的区别在于，defaultValue 属性保留原始默认值，而 value 属性值会根据用户在搜索字段中的输入而变化。
语法
以下是设置 defaultValue 属性的语法 −
searchObject.defaultValue = value
此处，"value"是搜索字段的默认值。
示例
让我们看一个 Input Search defaultValue 属性的示例 −
<!DOCTYPE html>
<html>
<body>
<h1>Input Search defaultValue Property</h1>
<form>
FRUITS: <input type="search" id="SEARCH1" name="fruits" value="MANGO">
</form>
<p>Change the above search field default value by clicking on the CHANGE button</p>
<button type="button" onclick="changeDefault()">CHANGE</button>
<p id="Sample"></p>
<script>
function changeDefault() {
document.getElementById("SEARCH1").defaultValue="APPLE";
var P=document.getElementById("SEARCH1").defaultValue;
document.getElementById("Sample").innerHTML = "Default value has been changed from MANGO to "+P ;
}
</script>
</body>
</html>
输出
这将产生以下输出 −
点击"更改"按钮 −
在上面的例子中，−
我们首先创建了一个 <input> 元素，其 type=”search”、id=”SEARCH1”、name=”fruits”，其 value 属性设置为 “MANGO”。搜索字段位于表单中。 −
<form> FRUITS: <input type="search" id="SEARCH1" name="fruits" value="MANGO"> </form>
然后我们创建一个按钮"CHANGE"，当用户点击该按钮时，它将执行 changeDefault() 方法 −
<button type="button" onclick="changeDefault()">CHANGE</button>
changeDefault() 方法使用 getElementById() 方法获取类型为"search"的输入字段，并将其 defaultValue 属性设置为"APPLE"。然后，我们再次使用 getElementById() 方法获取类型为"search"的输入字段的 defaultValue 属性，并将其赋值给变量 P。然后，使用段落的 innerHTML 属性，将此变量显示在 id 为"Sample"的段落中。 −
function changeDefault() {
document.getElementById("SEARCH1").defaultValue="APPLE";
var P=document.getElementById("SEARCH1").defaultValue;
document.getElementById("Sample").innerHTML = "Default value has been changed from MANGO to "+P ;
}
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
