JS修改Input的Value值

一、基礎操作

在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值十分的靈活方便，可以滿足各種業務場景的需求。