javascript - 在 "enter"上使输入元素在单元格中消失，但保留文本内容

Question

我想用 JavaScript 更改单元格内容。当我单击单元格时，会出现一个 input 元素，该元素获取单元格文本的值。在编辑输入元素中的文本后，当我单击 Enter 时，我希望单元格再次正常(没有输入元素)。

这是一个表格:

<table>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 4</td>
<td>Content 5</td>
<td>Content 6</td>
</tr>
</table>

这是 JavaScript:

$("td").click(function(){
  if($(this).find("input").length==0){
    var cellContent = $(this).html();
    $(this).empty();
    $(this).append("<input type='text' size='"+cellContent.length+"' value='"+cellContent+"'>");
    $(this).find("input").focus();
}});// this part creates input element in a cell 

现在，当新内容应保留在单元格中但没有输入元素时，按 Enter 键后会出现问题。

$("td").click(function(){
  var newCellContent = $("input",this).val();
  console.log(newCellContent);
  $("input").keyup(function(event){
    if(event.which == 13){
      $(this).empty();
      $(this).html(newCellContent);
    }
    newCellContent = $("input",this).val();
  });
});

Answer 1

我个人建议使用 CSS 来显示/隐藏 <input>元素，并使用 JavaScript 仅处理值的传输和 <input> 的模糊处理按输入，如下所示:

// finding the <table> element containing the <input> elements,
// and adding an event-listener:
document.querySelector('table').addEventListener('keyup', function(e) {
  // 'e' is the event itself.

  // caching the element that triggered the keyup event:
  var current = e.target,

    // caching its tagName, in lower-case:
    tag = current.tagName.toLowerCase(),

      // we're using this check twice, so caching the result,
      // checking that the tag is equal to 'input', and that
      // the element has a 'type' property, and that the
      // current type is equal to 'text':
      isRelevantInput = tag === 'input' && current.type && current.type === 'text';

  // if the check returns true, and the key pressed (e.which) is
  // equal to 13 (the enter key):
  if (isRelevantInput && e.which === 13) {

    // we blur the element (allowing the CSS
    // to show the <label> text again, and hide
    // the <input>:
    current.blur();
  }

  // otherwise, if only the check itself is true
  // (note that the most difficult-to-satisfy condition
  // goes first):
  else if (isRelevantInput) {

    // we update the textContent of the <input> element's
    // next element-sibling (the <span> in this example)
    // to the current value of the <input> element:
    current.nextElementSibling.textContent = current.value;
  }
});

// Using Function.prototype.call() to use Array.prototype.forEach()
// to iterate over the NodeList returned from
// document.querySelectorAll():
Array.prototype.forEach.call(document.querySelectorAll('table label > input'), function (input) {
  // the first argument of the anonymous function (here: 'input')
  // is the array-element of the array over which we're iterating.

  // setting the value of the <input> to the textContent of
  // of its next element-sibling (the <span> containing the
  // text of the parent <label> associated with the <input>:
  input.value = input.nextElementSibling.textContent;
});

上面的 JavaScript 与这个 CSS 结合在一起:

td {
  height: 2em;
}
label > input {
  /* we're not using 'display: none' in
     order that the <input> elements can
     receive focus: */
  opacity: 0;
  height: 0;
}
/* once focused the <input>
   has a defined height and
   a visible opacity: */
label > input:focus {
  opacity: 1;
  height: 1.5em;
}
/* forcing the <span> to the
   next line of the <td>: */
label > input + span {
  display: block;
  height: 1.5em;
}
/* hiding the <span> when the
   <input> has focus: */
label > input:focus + span {
  display: none;
}

使用 HTML:

<table>
  <tr>
    <td>
      <!-- wrapping the <input> in a <label> element
           means that clicking the <label> text will
           focus the <input>, using CSS to show the
           <input> and hide the <span>: -->
      <label>
        <input type="text" /><span>Content 1</span>
      </label>
    </td>
    <!-- repeated content removed for brevity -->
  </tr>
</table>

document.querySelector('table').addEventListener('keyup', function(e) {
  var current = e.target,
    tag = current.tagName.toLowerCase(),
      isRelevantInput = tag === 'input' && current.type && current.type === 'text';
  if (isRelevantInput && e.which === 13) {
    current.blur();
  }
  else if (isRelevantInput) {
    current.nextElementSibling.textContent = current.value;
  }
});

Array.prototype.forEach.call(document.querySelectorAll('table label > input'), function (input) {
  input.value = input.nextElementSibling.textContent;
});

td {
  height: 2em;
}
label > input {
  opacity: 0;
  height: 0;
}
label > input:focus {
  opacity: 1;
  height: 1.5em;
}
label > input + span {
  display: block;
  height: 1.5em;
}
label > input:focus + span {
  display: none;
}

<table>
  <tr>
    <td>
      <label>
        <input type="text" /><span>Content 1</span>
      </label>
    </td>
    <td>
      <label>
        <input type="text" /><span>Content 2</span>
      </label>
    </td>
    <td>
      <label>
        <input type="text" /><span>Content 3</span>
      </label>
    </td>
  </tr>
  <tr>
    <td>
      <label>
        <input type="text" /><span>Content 4</span>
      </label>
    </td>
    <td>
      <label>
        <input type="text" /><span>Content 5</span>
      </label>
    </td>
    <td>
      <label>
        <input type="text" /><span>Content 6</span>
      </label>
    </td>
  </tr>
</table>

但是，对于您当前的 HTML，并使用 jQuery，我建议:

// finding the relevant <td> elements,
// using on() to attach an anonymous
// click event-handler:
$('table td').on('click', function() {
  // creating an <input> element,
  // setting its 'type' and 'value'
  // properties:
  var input = $('<input />', {
    'type': 'text',
    'value': this.textContent

  // appending the created <input> to the <td> (this/$(this))
  // after emptying the <td> using empty(), and focusing the
  // created <input>:
  }).appendTo($(this).empty()).focus();

// binding an keyup event-handler using on(),
// passing the event ('e') to the function:
}).on('keyup', function(e) {

  // if it was the enter key that was pressed:
  if (e.which === 13) {

    // finding the <input> element with find(),
    // and caching the result:
    var input = $(this).find('input');

    // inserting the text string of the current
    // value of the <input> before the <input>,
    // and then removing the <input>:
    input.before(input.val()).remove();
  }
});

$('table td').on('click', function() {
  var input = $('<input />', {
    'type': 'text',
    'value': this.textContent
  }).appendTo($(this).empty()).focus();
}).on('keyup', function(e) {
  if (e.which === 13) {
    var input = $(this).find('input');
    input.before(input.val()).remove();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Content 1</td>
    <td>Content 2</td>
    <td>Content 3</td>
  </tr>
  <tr>
    <td>Content 4</td>
    <td>Content 5</td>
    <td>Content 6</td>
  </tr>
</table>

引用文献:

• CSS:
  • Adjacent-sibling ( + ) combinator .
  • Child ( > ) combinator .
  • :focus pseudo-class .
• HTML:
  • <input> .
  • <label> .
  • <span> .
JavaScript:
• Array.prototype.forEach() .
• document.querySelector() .
• document.querySelectorAll() .
• eventTarget.addEventListener() .
• Function.prototype.call() .
• KeyboardEvent.key .
• jQuery:
  • appendTo() .
  • before() .
  • empty() .
  • find() .
  • remove() .
  • val() .