JS修改Input的Value值

发布时间：2023-05-19

一、基础操作

在JavaScript中，我们可以通过操作Input元素的value属性来修改输入框中的值。例如：

const inputElem = document.querySelector('#myInput');
inputElem.value = '新的值';

在上面的代码中，我们首先通过document.querySelector()方法获取了一个id为myInput的Input元素，并将其赋值给了inputElem变量。接着，我们通过修改inputElem的value属性将输入框的值修改为"新的值"。这就是最基础的JS修改Input Value的操作。

二、获取、设置输入框的值

除了直接设置某个Input元素的值之外，我们还可以通过代码获取、设置所有输入框的值。 获取所有输入框的值：

const allInputs = document.querySelectorAll('input'); // 获取所有输入框
const allValues = Array.from(allInputs).map(input => input.value); // 获取所有输入框的值
console.log(allValues); // 输出值

上面的代码首先使用document.querySelectorAll()方法获取了页面中所有input元素并将其赋值给allInputs。接着，我们使用Array.from()方法将allInputs转换为一个数组。最后，我们调用map()方法获取所有输入框的值并打印到控制台上。 设置所有输入框的值：

const allInputs = document.querySelectorAll('input'); // 获取所有输入框
Array.from(allInputs).forEach(input => input.value = '新的值'); // 设置所有输入框的值

上面的代码首先得到所有的Input元素，然后通过循环将其value属性赋值为"新的值"。

三、实时更新输入框的值

有时候，我们需要实时获取用户的输入，并对输入内容进行处理。在JavaScript中，我们可以通过监听输入框的input事件来实现这一功能。 监听input事件并获取输入内容：

const inputElem = document.querySelector('#myInput');
inputElem.addEventListener('input', e => {
  const inputValue = e.target.value; // 获取用户输入
  console.log(inputValue); // 输出用户输入
});

上面的代码首先获取id为myInput的输入框，并添加了一个input事件的监听器。当用户输入时，回调函数会被触发，并将用户输入的内容保存在inputValue变量中。我们可以在回调函数中对inputValue进行处理并对其赋值。

四、格式化输入框的值

在一些场景中，我们需要对用户输入的内容进行格式化，例如手机号码、金钱等。在这种情况下，我们可以通过对用户输入的内容进行格式化，并将格式化后的值赋值给输入框来达到格式化输入框值的目的。 格式化手机号码：

function formatPhoneNum(phoneNum) {
  const reg = /^(\d{3})\d+(\d{4})$/; // 匹配前三位和后四位
  return phoneNum.replace(reg, '$1****$2');
}
const inputElem = document.querySelector('#myInput');
inputElem.addEventListener('input', e => {
  const inputValue = e.target.value; // 获取用户输入
  const newValue = formatPhoneNum(inputValue); // 格式化输入值
  e.target.value = newValue; // 将格式化后的值赋值给输入框
});

上面的代码定义了一个formatPhoneNum()函数，该函数通过正则表达式匹配手机号码，并对其进行格式化。接着，我们监听输入框的input事件，并在回调函数中调用formatPhoneNum()方法来对用户输入进行格式化。最后，我们将格式化后的值重新赋值给输入框，实现了输入框值的格式化。

五、通过ajax获取输入框的值并回填

在一些场景中，我们需要通过ajax获取一些动态数据，并将获取到的值更新到输入框中。这时，我们可以使用JS来实现这一功能。 通过ajax获取数据并回填到输入框：

function getUserInfo(id) {
  return fetch(`/api/user/info?id=${id}`)
    .then(res => res.json());
}
const inputElem = document.querySelector('#myInput');
inputElem.addEventListener('blur', async e => {
  const inputValue = e.target.value; // 获取用户输入
  const userInfo = await getUserInfo(inputValue); // 获取用户信息
  e.target.value = userInfo.phone; // 将用户信息填回输入框
});

上面的代码首先定义了一个异步的getUserInfo()方法，该方法通过fetch()方法获取用户信息，并返回一个Promise对象。接着，我们监听输入框的blur事件，并在回调函数中调用getUserInfo()方法来获取输入框的值对应的用户信息。最后，我们将获取到的用户信息的电话号码填回到输入框中。

六、总结

上文对JS修改Input Value的几个场景进行了详细的说明。通过这些例子，我们可以发现，利用JavaScript来修改Input的Value值十分的灵活方便，可以满足各种业务场景的需求。

推荐文章