一、基础操作
在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值十分的灵活方便，可以满足各种业务场景的需求。
