Question

我有一个html输入列表，以及一个关联的数据列表，定义如下：

<input list="mylist" id="my-input" name="friend-name" 
   placeholder="Begin typing friend's name here..." 
   required class="form-control">

列表本身（和关联的数据列表）工作正常。但是，我的每个条目都采用以下形式："String [numeric_id]"

我想知道的是，是否有某种方式可以隐藏我提交表单之前的[numeric_id]部分。
我已经查看了pattern属性，但这似乎限制了输入中允许的实际数据，这不是我想要的-我只是希望隐藏方括号[]之间的部分，但仍然提交给表单。
也可以将其移至type=hidden的另一个输入中。有没有办法做到这一点？

@isherwood，这是我的表单标签：

<form action="/chat_forwarding/modal_edit_msg.php" id="fwd-form" method="POST" class="form-inline" style="display: block;">

Answer 1

如果您不使用任何支持绑定的框架，则应侦听输入事件并根据该事件更新隐藏的输入。

这是一个可以给您带来启发的功能：

let realInput = document.getElementById('real-input');
let userInput = document.getElementById('user-input');
userInput.addEventListener('input', function(value) {
  const inputValue = value.target.value;
  realInput.value = inputValue; // update the hidden input
  const userInputResult = inputValue.match(/\[[^\[]*\]/); // the regex for [numberic_id]
  if (userInputResult) {
    userInput.value = inputValue.substring(0, [userInputResult.index - 1]); // -1 is to remove the space between the 'string' and the '[numeric_id]'
  }
});

Answer 2

我应该提到我的输入也使用Awesomplete（和jQuery）。因此，绑定普通事件（例如keyup）不起作用（该事件将在用户键入密钥时触发）。我可以通过awesomplete-selectcomplete事件实现所需的功能，如下所示（这将从形式为“字符串[id]”的字符串中添加具有id值的隐藏输入元素）：

const babelSettings = {
  extends: path.join(__dirname, "./.babelrc")
};

如何隐藏html输入列表中的某些字符？

2 个答案: