Добавление стилизованного div с определенным содержимым из поля ввода текста с использованием JavaScript

Question

Извините, я вроде нуб-джаваскрипта.Я использую 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

Вы имеете в виду что-то вроде этого -?

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

Извините за длинную цепочку, я знаю, что есть и другие способы, но это был единственный способ, которым я мог думать об атм.

РЕДАКТИРОВАТЬ: это может работа:

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

Answer 3

Можно взглянуть на следующие функции:

$("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"

Объединение всего этого в обработчик событий должно делать то, что вам нужно

Answer 4

var content = $ ('# input_id' '). Val ();var elem = $ (''). addClass ('имя_класса'). html (content)

$ ('# id_of_element_to_append'). append (elem)

.

Боб