HTML | DOM 输入周 defaultValue 属性

defaultValue 属性用于设置输入元素的默认值。它适用于 <input>、<textarea> 和 select 元素。

语法

<input defaultValue="default value">
<textarea defaultValue="default value"></textarea>
<select>
  <option defaultValue="default value">Default Option</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

属性值

• 对于 <input> 和 <textarea> 元素，defaultValue 属性接受一个字符串作为默认值。
• 对于 select 元素，defaultValue 属性可用于设置默认选中的选项。只需要在默认选项的 <option> 元素上添加 defaultValue 属性即可。

使用示例

设置输入框的默认值

<input type="text" defaultValue="John Doe">

在上面的示例中，输入框的默认值被设置为 "John Doe"。

设置文本区域的默认值

<textarea defaultValue="Lorem ipsum dolor sit amet, consectetur adipiscing elit."></textarea>

上述代码将在文本区域中设置指定的默认文本。

设置下拉列表的默认选项

<select>
  <option defaultValue="option1">Option 1</option>
  <option>Option 2</option>
  <option defaultValue="option3">Option 3</option>
</select>

在上述代码中，"Option 1" 和 "Option 3" 将作为默认选中的选项显示。

JavaScript 使用

可以使用 JavaScript 动态地修改 defaultValue 属性的值。

获取 defaultValue 值

要获取输入元素的默认值，可以使用以下 JavaScript 代码：

const input = document.querySelector('input');
const defaultValue = input.defaultValue;
console.log(defaultValue); // 输出默认值

设置 defaultValue 值

要设置输入元素的默认值，可以使用以下 JavaScript 代码：

const input = document.querySelector('input');
input.defaultValue = 'New default value';

上述代码将输入元素的默认值更改为 "New default value"。

结论

defaultValue 属性可用于设置输入元素的默认值，包括输入框、文本区域和下拉列表。它可以通过 HTML 或 JavaScript 来设置和获取。