HTML <textarea> не сбрасывается должным образом с помощью Jquery

Question

HTML <textarea> не сбрасывается должным образом с помощью Jquery

0

У меня есть простая форма комментария, которая состоит из текстового поля для имени и текстового поля для комментария и обычной кнопки для отправки. Кнопка отправки сбрасывает текстовое поле в 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();
    });
});

Я извиняюсь, если вопрос неясен или отсутствует информация. Заранее спасибо!

LarryG 16 апр. 2014, в 15:21

Источник

0

С точки зрения UX, эта функциональность будет путать людей? Если бы я что-то печатал в текстовой области, я бы не ожидал, что нажмете клавишу return, чтобы отправить.
Tank 16 апр. 2014, в 13:08

Теги:

javascript

jquery

html

css

2 ответа

0

это решение... e.preventDefault();

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

Dave 16 апр. 2014, в 11:58

Ещё вопросы

С точки зрения UX, эта функциональность будет путать людей? Если бы я что-то печатал в текстовой области, я бы не ожидал, что нажмете клавишу return, чтобы отправить.

Niet the Dark Absol · Accepted Answer · 2014-04-16T10-45-00.000Z

Добавьте e.preventDefault() к вашему обработчику keypress.

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

Спасибо! Простое решение, которое работает так же, как и планировалось.
@LarryG, одно предложение после нажатия ENTER на фокусе текстовой области должно быть перемещено в текстовое поле CommnetName.