Question

当文本由Javascript格式化时，最终光标位置似乎不完全可预测。

有时光标会移动到新格式文本的末尾。
有时光标会像文字处理器一样停留在格式化文本的中间。

我可以遵循的规则是否可以预测光标的最终位置？

以下示例是简化的电话号码格式脚本。 e.target.value用于获取keyup之后的值。然后将该值格式化为电话号码，并使用e.target.value将其推回到文档中。超级简单。

'use strict';
	
document.getElementsByClassName('input_style')[0].addEventListener('keyup', releaseKey);	

function releaseKey(e) {
	
  let phoneValue, phoneLength;
		
  phoneValue = e.target.value.replace(/\D+/g, '');
  phoneLength = phoneValue.length;	
		
  if (phoneLength < 3) {
    e.target.value = phoneValue; 
  } else if (phoneLength < 6 ) {
    e.target.value = '(' +phoneValue.substring(0, 3) +') ' +phoneValue.substring(3);
  } else {
    phoneValue = phoneValue.substring(0, 10);
    e.target.value = '(' +phoneValue.substring(0, 3) +') ' +phoneValue.substring(3, 6) +'-' +phoneValue.substring(6, 10);
  } 

}

.input_style {
	flex: 1 0 auto;
	font-size: 2rem;
	font-family: arial;
}

<input class="input_style" placeholder="(555) 555-5555">

如果您输入一个10位数字，则在您按预期键入时光标会向前移动。
编辑此10位数字也可按预期工作。将光标移动到10位数内的任何位置并键入新数字。这个新号码会向前推送其他号码，最后一位数字会下降。在每次keyup和函数迭代之后，光标按预期移动到电话号码的末尾。
但是，如果您在输入所有10位数之前编辑电话号码，则会出现看似无法预测的行为。
例如输入7位数字。将光标定位在第7位之前并输入新数字。光标在位置7处添加新数字并将旧数字推到位置8. 然而，关键区别在于光标像文字处理器一样保持在位置。这允许您输入多达10个的数字。在keyup和函数迭代之后，为什么光标不像以前那样移动到结束线？这不一定是因为你没有输入一个完整的10位数，因为如果你用3位数字进行测试，就会像之前一样将光标发送到结尾。
正在读取长故事短e.target.value并替换每个函数迭代。有时光标移动到行尾，有时它会停留在中间。这种行为有规则吗？非常感谢！

为什么在格式化过程中光标位置不总是可预测的？

0 个答案: