javascript - html <textarea> 未使用 Jquery 正确重置

Question

我有一个简单的评论表单，其中包含一个用于名称的文本字段和一个用于评论的文本区域以及一个用于提交的常规按钮。提交按钮根据下面的 jquery 重置文本区域。它工作正常，除了一个烦人的问题，如果我写一些东西并按回车键，它会从文本区域中删除文本，但会在文本区域中创建一个新行。我该如何修复它，以便在按 Enter 时文本区域真正为空？

它也在 codepen 上:http://codepen.io/erikL/pen/Leymj

HTML

<p class="inline-block name">Name</p>&nbsp

<input type="text" placeholder="Your name" id="userName" maxlength="30">
    <textarea class="comment" id="userComment" placeholder="Enter your comment here" maxLength="300"></textarea>

    <p><em>max 300 characters</em></p>

    <input type="button" class="comment" value="Submit" onclick="userComment()" id="button" />

<div id="comments"></div>

用于提交评论的 Javascript

function userComment() {
  var textd = document.getElementById("userComment");
  var named = document.getElementById("userName");
  var textdVal = textd.value;
  var namedVal = named.value;

  if (namedVal.length < 1) {
    alert('Please enter you name.');
  }
  else {
    if(textdVal.length < 3) {
      textdVal = 'No comment.';
    }
  var namedParagraph = document.createElement('p');
  var textdParagraph = document.createElement('p');
  namedParagraph.textContent = namedVal + (' - ') + date;
  textdParagraph.textContent = textdVal;
  namedParagraph.className = 'commentName';
  textdParagraph.className = 'commentText';

  document.getElementById("comments").appendChild(namedParagraph);
  document.getElementById("comments").appendChild(textdParagraph);

  document.getElementById("userName").value=""; //this is where it resets the name
  document.getElementById("userComment").value=""; //this is where it resets the comment
  }
};

用于重置表单的 Jquery

$(document).ready(function(){
    $('#userComment').keypress(function(e){
      if(e.keyCode==13) 
      $('#button').click();
    });
});

如果问题不清楚或缺少信息，我深表歉意。提前致谢!

Answer 1

将 e.preventDefault() 添加到您的 keypress 处理程序的条件中。

http://codepen.io/anon/pen/Avzaq