javascript - 如何从包含该文本框文本的文本框 div 制作。是否可以？

Question

我想在我的网站上创建这个。用户将在文本框中输入一些文本，在他按下回车键后，文本框将变为 div，div 将包含文本框中的文本，它将位于文本框所在的同一位置，文本框将隐藏.可能吗？

这是我现在拥有的: 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(在 HTML 文件中)

<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

您必须使用 event.which 来指示何时按下 enter 按钮。此外，使用 $('#name').hide() 隐藏 textbox。

阅读更多关于 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>