使用javascript从文本输入框中添加具有特定内容的样式化div

Question

抱歉，我有点像javascript新手。 我正在使用Jquery。

我有一个输入框，我想接受文本输入，并使用输入创建一个新的div，并在上面加上适当的标签。

具体来说，取输入值和输出：

输入值5

并清除输入框并将其向下移动50px。

我几乎不知道我在JavaScript中做什么。

Answer 1

$('input').bind('keydown', function(e) {
    var $self = $(this),
        dimen = $.extend($self.position(), {
             width:  $self.outerWidth(),
             height: $self.outerHeight()
        });

    if( e.which === 13 && $.trim(this.value).length ) {
        $('<div>', {
             text: this.value,
             css: {
                 position:   'absolute',
                 width:      dimen.width,
                 height:     dimen.height,
                 left:       dimen.left,
                 top:        dimen.top
             }
        }).appendTo($self.parent());

        $self.val('').css('position', 'absolute').animate({top: '+=50'}, 1000);
    }
});

演示 ： http : //www.jsfiddle.net/4yUqL/81/

Answer 2

var content = $（'＃input_id''）。val（）; var elem = $（''）。addClass（'class_name'）。html（content）

$（'＃id_of_element_to_append'）。append（elem）

试试上面。

鲍勃

Answer 3

你的意思是这样吗？

$('#myinput').css({top: $(this).offset().top+50}).prepend('<div><input type="text" value="'+$('#myinput').val()+'" /></div>').val('');

抱歉，长链很长，我知道还有其他方法，但这是我想到atm的唯一方法。

编辑：这可能工作：

$('input').attr('value',$('#myinput').val()).prependTo($('#myinput'));
$('#myinput').css({top: $(this).offset().top+50}).val('');

Answer 4

您可以查看以下功能：

$("input#myinput").val() - gives you the value in the input field with id="myinput"
$("input#myinput").val("") - clears the input field with id="myinput"
$("div#mydiv").html("blah") - sets the content of the div with id="mydiv" to blah
$("div#mydiv").append("blah") - adds blah to the current content of the div with id="mydiv"
$("div#mydiv").css({ marginTop: '50px' }); - Sets the margin of the div with id="mydiv"

将所有这些都组合到事件处理程序中，应该可以满足您的需求