Question

有人可以帮我处理我的代码吗？每当我输入我的文本框时，它会创建多个文本框，但我想创建一个程序，每当我按下回车键，它就会创建另一个文本框。

这是我的代码：

<script language="javascript">
    function changeIt() {
     var i = 1;
     my_div.innerHTML = my_div.innerHTML +"<br><input type='text' name='mytext'+ i><br/>"
    }
</script>
<body>
    <form name="form" action="post" method="">
      <input type="text" name=t1 onkeydown="changeIt()">
      <div id="my_div"></div>
    </form>
</body>

Answer 1

每次按下按钮时，您的当前JS功能都会被执行，因为您正在使用事件onkeydown来捕获任何键。

这样做：

<script>
var changed = function(e){
    if (!e) e = window.event;
    var keyCode = e.keyCode || e.which;
    if (keyCode == '13'){

        /* YOUR EXECUTION CODE */

    }
}
</script>

<form name="form" action="post" method="">
  <input type="text" name="t1">
  <div id="my_div"></div>
</form>

Answer 2

请参阅此fiddle

您在代码中所做的是在按键发生时创建文本字段。要仅在按下回车键时创建文本字段，您必须检查按下按钮的键代码。

所以，请按照以下方式更改你的JS ..

function changeIt(event) {
  var key = event.which || event.keyCode;
  if (key == '13') {
    var i = 1;
    my_div.innerHTML = my_div.innerHTML + "<br><input type='text' name='mytext'+ i><br/>"
  }
}

请确保您也按以下方式更换<input>

<input type="text" name=t1 onkeydown="changeIt(event)">

请在docs中详细了解keyCode ..此外，如果您想查找任何按钮的keyCode，请查看keycode.info

Answer 3

每次按任何键，您都在创建一个新的<input>。相反，您应该使用e.key或e.code检查是否按下了 Enter （请注意，e.which和e.keyCode均已弃用）。

另外，考虑使用Node.appendChild() 代替innerHTML。否则，每次您添加新的<input>时，所有现有的将重新创建并丢失其值。

const input = document.getElementById('input');
const inputs = document.getElementById('inputs');

input.addEventListener('keydown', ({ key }) => {
  if (key !== 'Enter') return;
  
  const newInput = document.createElement('input');
  
  newInput.type = 'text';
  newInput.name = `mytext${ inputs.children.length }`;
  
  inputs.appendChild(newInput);
});

input {
  display: block;
}

<form name="form" action="post" method="">
  <input type="text" id="input">
  <div id="inputs"></div>
</form>

如果需要检查KeyboardEvent的属性值，例如e.key，e.code，e.which或e.keyCode，则可以使用https://keyjs.dev：

$Key.js \ JavaScript KeyboardEvent's key codes & key identifiers$

免责声明：我是作者。

按Enter键的动态文本框

3 个答案:

请参阅此fiddle