Question

我在div中的td内有一个输入文本框，现在当用户输入一些文本并按Enter时，应该在同一td上添加一个带有输入框的div。目标是在后续行中具有多个值。

我可以在按键上添加div，但是这里的问题是我无法使按键触发一次。我曾经用flag使其触发过一次，但在我的情况下却不起作用。

按键事件之前

<div id="grid">
<table>
<tr>
<td class="first-row">
<div><input class ="td-input"></input></div>
</td>
</tr></table>

在div上添加div后，dom如下所示

<div id="grid">
<table>
<tr>
<td class="first-row">
<div><input class ="td-input"></input></div>
<div><input class="td-input"></input></div>
</td>
</tr></table>

jQuery

$('#grid').on('keypress','td.first-row > div input.td-input', 
function(event){
var key = (event.keyCode ? event.keyCode : event.which);
var currentTD,addDiv;
if(key == '13'){
currentTD = $(this).closest('td');
addDiv = '<div><input class="td-input"></input></div>';
currentTD.append(addDiv);
}
});

我希望在输入文本框中的每次按键仅添加一次“ div”。在我的代码中，如果按两次Enter键将添加2个div。

请参考下图输出。

$('#grid').on('keypress', 'td.first-row > div input.td-input', function(event){
				var key = (event.keyCode ? event.keyCode : event.which);
				var currentTD,addDiv;
				if(key == '13'){
					currentTD = $(this).closest('td');
					addDiv = '<div class="additional-row"><input class="td-input"></input></div>';
					currentTD.append(addDiv);
			}
		});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="grid">
<table>
<tr>
<td>
<div><input class ="td-input" placeholder="Enter here column 1"></input></div>
</td>
<td class="first-row">
<div><input class ="td-input" placeholder="Enter here column 2"></input></div>
</td>
</tr>
</table>

Answer 1

如果您只允许在输入上输入单个输入以插入新输入，因为您已经在使用委托，则可以对其进行更改以测试输入是否没有类。为输入处理事件处理程序后，通过将其添加到类中，可以确保以后的输入不会重复使用它。

$('#grid').on('keypress', 'td.first-row > div input.td-input:not(.processed)', function(event) {
  var key = (event.keyCode ? event.keyCode : event.which);

  if (key == 13) {
    var $this = $(this);
    var $td = $this.closest('td');
    
    $td.append('<div class="additional-row"><input class="td-input"></input></div>');
    $this.addClass('processed');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="grid">
  <table>
    <tr>
      <td>
        <div><input class="td-input" placeholder="Enter here column 1"></input>
        </div>
      </td>
      <td class="first-row">
        <div><input class="td-input" placeholder="Enter here column 2"></input>
        </div>
      </td>
    </tr>
  </table>

Answer 2

您只需使用命名事件处理程序，然后使用.off() JQuery method即可在完成之前注销先前注册的处理程序。

此外，keypress是测试ENTER键的错误事件（对于不可打印的字符不会触发）。为此，请使用keydown。

最后，input元素没有结束标记（</input>）。那是无效的HTML。

$('td.first-row > div input.td-input').on('keydown', makeInput);

function makeInput(event){
  var key = event.keyCode || event.which;  // Just need to check which one exists
  if(key == '13'){
    // Doesn't make sense to set up variables for values you'll only use once
    $(this).closest('td').append('<div><input class="td-input"></div>');
    
    // Just de-register the currently registered callback
    $('td.first-row > div input.td-input').off('keydown', makeInput);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="grid">
  <table>
    <tr>
      <td class="first-row">
        <div><input class ="td-input"></div>
      </td>
    </tr>
  </table>
</div>

Answer 3

尝试使用<template>标签

let data = [''];

function setValue(inp, i) {
  data[i] = inp.value;
}

function add(e,i) {
  if (e.key != 'Enter' || i+1<data.length) return;
  data.splice(i+1,0,'');
  show(data);
  cell.children[i+1].children[0].focus();
}

function show(data) {
  let t= item.innerHTML;
  let inj = (s,o)=>s.replace(/\${(.*?)}/g,(x,g)=>o[g]);
  cell.innerHTML=data.map((v,i)=>inj(t,{val:v.replace(/"/g,"&quot;"),i})).join('')
}


show(data);

td { border: 1px solid black; }

<div id="grid">
  <table>
    <tr>
      <td class="first-row" id="cell"></td>
    </tr>
  </table>
</div>

<template id="item">
  <div>
    <input 
      class="td-input" 
      onkeypress="add(event,${i})" 
      oninput="setValue(this,${i})" 
      value="${val}" />
  </div>
</template>

在jQuery键盘上的td中添加多个div

3 个答案: