Wie aus dem Textfeld div, das den Text dieses Textfelds enthält. Ist es möglich?

Question

Ich möchte dies auf meiner Website erstellen. Der Benutzer wird etwas Text in das Textfeld eingeben und nachdem er die Eingabetaste gedrückt hat, ändert sich das Textfeld in das div und das div wird den Text aus dem Textfeld enthalten und es wird sich an der gleichen Stelle befinden wie das Textfeld und das Textfeld wird ausgeblendet . Ist es möglich? Hier

ist, was ich habe jetzt: HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.3/js.cookie.js"></script> 
<input id="name" type="text" class="name" placeholder="What's your name?"/> 

Javascript (innerhalb von HTML-Datei)

<script> 
      $(document).ready(function(){ 
       var name = Cookies.get('_username'); 
       if (name) { 
        $('#name').val(name); 
       } 
       $('#name').keydown(function(){ 
        var inputName = $('#name').val(); 
        Cookies.set('_username', inputName); 
       }) 
      }); 
     </script> 

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:700'); 
.name{ 
    font-family: 'Roboto Condensed', sans-serif; 
    font-size: 3.5vw; 
    border: 0; 
    outline:0; 
    background: transparent; 
    border-bottom: 2px solid white; 
    width: 30%; 
    color:#000000; 
    position:fixed; 
    top:60%; 
    left:50%; 
    margin-left:10px; 
} 

Answer 1

Sie haben event.which zu verwenden, um anzeigt wenn enter Taste gedrückt wurde. Verwenden Sie auch $('#name').hide(), um die textbox auszublenden.

Lesen Sie mehr über event.which .

$(document).ready(function(){ 
 
    $('#name').keydown(function(e){ 
 
     if(e.which==13){ 
 
      $('#name').hide(); 
 
      $('#text').html($('#name').val()); 
 
     }      
 
     }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="name" type="text" class="name" placeholder="What's your name?"/> 
 
<div id="text"> 
 

 
</div>

Answer 2

Um Ihre Frage zu beantworten, ist es ziemlich einfach ist jQuery verwenden;

$('#name').keydown(function(e){ 
 
    if(e.which == 13) { 
 
     $(".myDiv").text($(".myDiv input").val()); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="myDiv"> 
 
\t <input id="name" type="text" class="name" placeholder="What's your name?"/> 
 
</div>

Nun, wenn Sie Cookies verwenden möchten, so dass der Benutzer nicht die Informationen, die ich, dass auch beantworten kann jedes Mal neu eingeben muss.

Answer 3

Wenn Sie das Textfeld Verwendung replaceWith

var inputName = $('#name').val(); 
if(e.keyCode == 13){ 
    $(this).replaceWith($("<div>").html(inputName)); 
} 

Example

Answer 4

Sie könnten ersetzt werden soll verwenden jquery diesen Effekt zu erzielen. Halten Sie das div zunächst versteckt mit css wie display: none;, die wir mit js auf Enter anzeigen. Lassen Sie das div und das Textfeld eine ID von div bzw. textbox haben.

$('#textbox').keydown(function(event){ 
    //Check if enter was pressed 
    if(event.which == 13){ 
     event.preventDefault(); 
     //Get value from textbox and set to div 
     $('#div').text($('#textbox').val()); 
     //Show div and hide textbox 
     $('#div').show(); 
     $('#textbox').hide(); 
    } 
})