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

【问题标题】：How to make from textbox div which contains text of that textbox. Is it possible?如何从包含该文本框文本的文本框 div 制作。是否可以？
【发布时间】：2017-01-10 19:40:38
【问题描述】：

我想在我的网站上创建这个。用户将在文本框中输入一些文本，在他按下回车后，文本框将变为 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;
}

【问题讨论】：

标签： javascript jquery html css input

【解决方案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>

【讨论】：

是的，谢谢，但是如何让文本框在文本框所在的位置隐藏和显示 div？

【解决方案2】：

您可以使用 jquery 来实现该效果。最初使用 display: none; 等 css 隐藏 div，我们将在按 Enter 时使用 js 显示。让div和textbox的id分别为div和textbox。

$('#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();
    }
})

【讨论】：

【解决方案3】：

如果要替换文本框，请使用 replaceWith

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

Example

【讨论】：

【解决方案4】：

要回答您的问题，使用 jQuery 非常简单；

$('#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">
	<input id="name" type="text" class="name" placeholder="What's your name?"/>
</div>

现在，如果您想使用 cookie，这样用户就不必每次我都可以回答时重新输入信息。

【讨论】：