html <textarea>使用Jquery無法正常重置

我有一個簡單的註釋表單，其中包含一個用於名稱的文本框和一個用於註釋的textarea和一個用於提交的常規按鈕。提交按鈕重置每個jquery下面的textarea。它工作正常，除了一個令人討厭的問題，如果我寫東西，然後按回車它從textarea刪除文本，但在textarea中創建一個新行。我如何解決這個問題，所以textarea在按下回車鍵時真的是空的？html <textarea>使用Jquery無法正常重置

它也是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(); 
    }); 
});

如果問題不清楚或缺乏信息，我很抱歉。提前致謝！

來源

2014-04-16 LarryG

從UX的角度來看，這個功能會讓人困惑嗎？如果我在textarea中輸入了某些東西，我不會期望返回提交。 – Tank

將e.preventDefault()添加到您的keypress處理程序的條件。

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

來源

2014-04-16 13:02:19

謝謝！簡單的解決方案，按計劃運行。 – LarryG

@LarryG，按ENTER鍵後textarea焦點應該在CommnetName文本框中移動一個建議。 –

這是溶液... e.preventDefault（）;

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

來源

2014-04-16 13:05:04 Dave

html <textarea>使用Jquery無法正常重置

回答

相關問題