Question

我试图使输入元素在移动浏览器和Web Chrome浏览器上均可使用。 Onkeypress可在Web Chrome浏览器中使用，但不能在移动Chrome浏览器中使用。因此，我使用了在两者上均可使用的oninput。

在通过oninput事件超过5的输入值后，我将一个char说“-”连接到输入值。添加'-'后，退格键或Delete键不起作用。同样，如果将光标移到字符串之间，并删除除“-”以外的其他字符，则光标将移至字符串的末尾。

请在下面找到我的代码。

HTML
<input type="text" id="inputcheck" value='' oninput="getmeValidated(this, event);">

JAVASCRIPT
function getmeValidated(element, event){    
   if(element.value.length > 5){
      element.value = element.value+"-";
   }        
}

Answer 1

退格功能有效，但是当您添加-的退格键时，length已经大于5，因此它会根据您的情况删除最后一个并添加新的-。您应该有Boolean来检查是否添加了-

let added = false;
function getmeValidated(element, event){    
   if(element.value.length === 5 && !added){
      element.value = element.value+"-";
	  added = true;
   }
   if(element.value.length < 5) added = false;  
}

<input type="text" id="inputcheck" value='' oninput="getmeValidated(this, event);">

Answer 2

一种方法可能是仅在新值长于旧值时才插入，这样任何删除操作（例如退格，选择和剪切等）都将正常工作。

此外，一次输入可能不仅限于单个字符。例如。用户可以使用更长的字符串在输入字段中执行复制+粘贴操作。因此，您不仅可以将字符添加到字符串的末尾，而且还可以在其中添加子字符串。

这里有一个简短的代码片段来演示这一点（带有注释使其更清晰）：

let input = document.getElementById('input')
let insertAt = 5
let charToInsert = '-'
let oldValue = input.value

input.addEventListener('input', (ev) => {
  let {value} = ev.target
  if (
    // Only insert when new value is longer than old
    value.length >= oldValue.length &&
    // Only insert when at correct length
    value.length >= insertAt &&
    // Only insert when it's not been inserted already
    value.charAt(insertAt) !== charToInsert
  ) {
    ev.target.value = (
      value.substr(0, insertAt) +
      charToInsert +
      value.substr(insertAt)
    )
  }
  oldValue = value
})

<input id="input">

如何在输入字段上使用退格键删除字符

2 个答案: