数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究HTML DOM Input Search defaultValue 属性
HTML DOM Input Search defaultValue 属性用于设置或获取搜索字段的 defaultValue。元素的 defaultValue 是分配给 value 属性的值。value 和 defaultValue 属性之间的区别在于，defaultValue 属性保留原始默认值，而 value 属性的值根据用户在搜索字段中的输入而变化。
语法
以下是设置 defaultValue 属性的语法：
searchObject.defaultValue = value
这里，“value”是搜索字段的默认值。
示例
让我们来看一个 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> 元素，类型为“search”，id 为“SEARCH1”，name 为“fruits”，并且其 value 属性设置为“MANGO”。搜索字段位于表单内：
<form> FRUITS: <input type="search" id="SEARCH1" name="fruits" value="MANGO"> </form>
然后，我们创建了一个“更改”按钮，当用户点击该按钮时，将执行 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 ;
}
更新于: 2021年2月19日
91 次查看
广告