在 JavaScript 中如何通过输入设置文本值

在 JavaScript 中，可以通过输入元素来设置文本的值。输入元素包括文本框、密码框、下拉列表、单选框和复选框等等。以下是一些常见的输入元素及其用法。

文本框

文本框是用于输入文本的基本元素。可以通过 value 属性来设置和获取文本框中的文本。

HTML

<input type="text" id="myInput" />

JavaScript

const myInput = document.getElementById('myInput');
myInput.value = 'Hello, world!';

以上代码会将文本框中的值设置为 Hello, world!。

密码框

和文本框类似，密码框也可以通过 value 属性来设置和获取值。不同的是，密码框输入的内容并不会显示为明文，而是被隐藏成 * 或其他类似字符。

HTML

<input type="password" id="myPassword" />

JavaScript

const myPassword = document.getElementById('myPassword');
myPassword.value = '123456';

以上代码会将密码框中的值设置为 123456。

下拉列表

下拉列表是用于选择具有预定义选项的值的元素，也称为选择框或下拉框。下拉列表可以通过 value 属性来设置和获取选中的值。

HTML

<select id="mySelect">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="cherry">Cherry</option>
</select>

JavaScript

const mySelect = document.getElementById('mySelect');
mySelect.value = 'banana';

以上代码会将下拉列表中选中的值设置为 banana。

单选框和复选框

单选框和复选框是用于提供选择的元素。它们可以通过 checked 属性来设置和获取选中的状态。

HTML

<label>
  <input type="radio" name="myRadio" value="male" />Male
</label>
<label>
  <input type="radio" name="myRadio" value="female" />Female
</label>
<label>
  <input type="checkbox" id="myCheckbox" />Remember me
</label>

JavaScript

const myRadioMale = document.querySelector('input[name="myRadio"][value="male"]');
const myCheckbox = document.getElementById('myCheckbox');

myRadioMale.checked = true;
myCheckbox.checked = false;

以上代码会将单选框选中 male，复选框取消选中。

以上是 JavaScript 中通过输入设置文本值的一些常见方式。当然，还有其他各种元素和属性可以进行操作。详细的文档可以参考 MDN Web Docs。