Question

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

Answer 2

您可以使用jquery来实现这种效果。最初使用css保持div隐藏，例如display: none;，我们将在按Enter键时使用js显示。设div和文本框的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();
    }
})

Answer 3

要回答你的问题，使用jQuery非常简单;

＆＃13;

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

＆＃13;

<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>

＆＃13;

现在，如果您想使用Cookie，那么每次我都可以回复时，用户也不必重新输入信息。

Answer 4

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

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

Example

如何从textbox div包含该文本框的文本。可能吗？

4 个答案: