如何從文本框輸入中刪除尾隨和前導空格

Question

如果我有這樣的事情：

  return array.map(item => (
<input type="text" value={item.name}> onChange ={(name) => changeItemName(name.target.value)}

其中 changeItemName 函數基本上是一個將更改當前項目的名稱屬性的函數。 我怎樣才能確保名稱屬性不會有任何尾隨或前導空格？ 我可以在我的 changeItemName 函數中做這樣的事情：

changeItemName(name){
name.trim()
... logic to change name of item }

但是，由於我使用的是onChange() ，因此每次鍵入字符時都會調用此方法。 這意味着如果用戶在 2 個單詞之間鍵入常規空格，這將不起作用，因為傳遞給函數的名稱將被修剪，因此現在允許任何空格。 我該如何調整它以使空格仍然有效但前導和尾隨空格消失了？

Answer 1

您可以在用戶完成輸入后修剪name 。 例如，當輸入失去焦點時。 嘗試這個：

<input type="text" value={item.name}>
    onChange ={(name) => changeItemName(name.target.value)}
    onBlur={()=> { item.name = item.name.trim() }} 
/>

當用戶轉到您網站的其他輸入或其他部分時， onBlur函數將在這里觸發。

Answer 2

有幾種選擇，一種是使用去抖動功能，該功能將在用戶停止輸入幾百毫秒后修剪輸入。 另一種選擇是修剪模糊事件的輸入。