Neuer Absatz jedes Mal, wenn ich die Tastatur Enter-Taste in meinem Eingabefeld (in dem es Text)

Question

Jedes Mal, wenn ich die Eingabe (auf meiner Tastatur) im Eingabefeld eingeben und es gibt Text im Eingabefeld, möchte ich den neuen Absatz zu erscheinen, die den Text aus dem Eingabefeld enthalten wird.

Dies ist mein Versuch, was ist falsch mit meinem Code? Es funktioniert nicht:

https://jsfiddle.net/dxuax025/

HTML:

<input type="text" id="text"> 
<div id="list"></div> 

jQuery:

$(document).ready(function() { 

       var r = $('<p>' + a.val() + '<p>'); 

     $('#text').keypress(function(e) { 
      if(e.which == 13 & a.val() !== "") { 
       var a = $('#text'); 
       var html = r(a.val()); 
       $('#list').append(html); 
       $(a).val("");} 
       return false; 
      }); 
     }); 

Answer 1

Logik ist:

1. Detect ENTER-Taste
2. , wenn der Benutzer gedrückte Taste ENTER dann nehmen Wert vom Eingang
3. Endlich anhängen p Tag div.

$(document).ready(function() { 
 

 
\t $('#text').keypress(function(e) { 
 
\t  var key = e.which; 
 
\t  if (key == 13) // the enter key code 
 
\t  { 
 
\t  var inputText = $("#text").val(); 
 
\t  $("#list").append("<p>" + inputText + "</p>"); 
 
      $("#text").val(""); 
 
\t  } 
 
\t }); 
 
\t });

#list p { 
 
    background: rgba(255, 255, 255, 0.95); 
 
    box-shadow: 0 2px 2px rgba(0, 0, 0, .15); 
 
    color: #473e39; 
 
    font-size: 16px; 
 
    margin: 0 auto 5px; 
 
    padding: 20px; 
 
    max-width: 520px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="text" placeholder="Input something and enter"> 
 
<div id="list"></div>