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

Question

Извините, что я являюсь javascript noob. Я использую JQuery.

У меня есть окно ввода, и я хочу взять ввод текста и сделать новый div с вводом и иметь соответствующие теги на нем.

В частности, принимает значение ввода и вывода:

Input Value 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(); вара эля = $ (''). AddClass ('class_name'). HTML (содержание)

$ ('# id_of_element_to_append'). Присоединять (эль)

Дайте выше попробовать.

Bob

Answer 3

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

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

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

EDIT: это может работа:

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

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