如何在输入中的数字之间留出空格仅用于显示？

Question

我想在数字之间留出空格，以便像这样显示

我用过

phone.addEventListener("keyup", function(){
  txt=this.value;
  if (txt.length==3 || txt.length==7)
    this.value=this.value+" "; 
});

但此代码仅适用于输入类型文本，问题是输入的长度不考虑为 10。

.

有没有什么办法，用空格显示，长度必须是10，并且有类型号，在后台保存不带空格？

Answer 1

使用pattern 输入类型和简单正则表达式的示例解决方案可确保只有数字、正确的间距，并且只向服务器提交不带空格的数字。

如果用户自己输入空格，您的代码确实会出错，因此 JavaScript 已得到增强以确保格式正确。

1. 通过阻止默认行为（忽略击键）来忽略空格输入和任何超过 12 个字符的输入：

if ((txt.length == 12 || e.which == 32) & e.which !== 8) e.preventDefault();

（字面意思是“如果 12 个字符或按键是空格键且键不是退格键”则忽略按键）

1. 自动添加空格（就像您的代码一样）： if ((txt.length == 3 || txt.length == 7) && e.which !== 8)...

注意：在这两种情况下，如果按下退格键，则允许该键工作（键码 8）。

1. 提交表单后，删除“电话”输入中的所有空格，以便服务器只接收数字。

document.getElementById("phone").addEventListener("keydown", function(e) {
  const txt = this.value;
  // prevent more than 12 characters, ignore the spacebar, allow the backspace
  if ((txt.length == 12 || e.which == 32) & e.which !== 8) e.preventDefault();
  // add spaces after 3 & 7 characters, allow the backspace
  if ((txt.length == 3 || txt.length == 7) && e.which !== 8)
    this.value = this.value + " ";
});
// when the form is submitted, remove the spaces
document.forms[0].addEventListener("submit", e => {
  e.preventDefault();
  const phone = e.target.elements["phone"];
  phone.value = phone.value.replaceAll(" ", "");
  console.log(phone.value);
  //e.submit();
});

<form>
  <input id="phone" name="phone" type="pattern" placeholder="### ### ####" pattern="[\d]{3} [\d]{3} [\d]{4}">
  <input type="submit">
</form>

Answer 2

您可以在将字符串提交到后端之前进行字符串替换：

number_str = this.value.replace(" ","");
let number_number = parseInt(number_str);
//backend request stuff

您还可以使用隐藏的输入来存储未加空格的字符串，并使用可见的输入来存储已加空格的字符串，然后同时更新它们吗？你只会提交隐藏的。

<input id="phonenumber" type="text" />
<input id="secret-phonenumber" type="hidden" />

Answer 3

确切地决定用户界面应该是什么有点棘手。虽然他们可以看到他们无法删除的空格，但如果允许正常的浏览器编辑，他们将能够做到。

我们还想忽略非数字输入，并且不允许总位数超过 10。

这个 sn-p 通过将输入作为普通文本类型而不是数字来执行这些操作，并测试每个键输入以查看是否应该包含它，并在每次需要时使用插入的空格重写值。

const phone = document.querySelector('.phone');
phone.addEventListener("keyup", function(e) {
  let txt = this.value.replace(/\D/g, '');
  let newtxt = '';
  //now copy the number inserting a space where needed
  for (let i = 0; i < Math.min(txt.length, 10); i++) {
    newtxt += txt[i];
    if ((i == 2) || (i == 5)) {
      newtxt += ' ';
    }
  }
  if (newtxt[newtxt.length - 1] == ' ') newtxt = newtxt.substring(0, newtxt.length - 1);
  this.value = newtxt;
});

<input class="phone">

需要进一步考虑对用户界面进行一些改进是否是个好主意。例如：

• 重新定位光标（此时光标移到末尾 每次输入后的字符串，如果他们是用户可能不会期望的 编辑部分数字）
• 这可能是一个关于是否最好显示的争论点 简单地说一个非法的字符，以使用户放心 他们确实按下了一个键，或者该角色是否应该 从不显示。

在将值提交给后端之前，记得去掉空格：

phone.value.replace(/\D/g, '');