Как я могу заменить ввод текстовой областью, сохраняя все атрибуты, используя jQuery? - PullRequest
Новая
       11

Как я могу заменить ввод текстовой областью, сохраняя все атрибуты, используя jQuery?

5 голосов
/ 04 марта 2012

У меня есть текстовый ввод, который я хотел бы заменить текстовой областью, сохраняя все атрибуты.Как я могу сделать это с помощью jQuery?

Пример ввода: 

<input type="text" name="newfeature" id="newfeature"
  class="form-required" tabindex="3"
  aria-required="true" />

Желаемый вывод: 

<textarea type="text" name="newfeature" id="newfeature"
  class="form-required" tabindex="3"
  aria-required="true"></textarea>

Я знаю, что это можно сделать вручную, используя .prop()селектор и указание каждого атрибута / свойства, но как я могу сделать это динамически?

Кроме того, в этом нет необходимости, но можно ли сохранить привязки при этом?

Ответы [ 3 ]

4 голосов
/ 04 марта 2012

Это также правильно работает с атрибутом value: 

$('input').each(function() {

    var attrs = {};        

    $.each(this.attributes, function() {
       attrs[this.name] = this.value;
    });

    $(this).replaceWith($('<textarea>').prop(attrs));
});​

Пример: http://jsfiddle.net/FyYDT/

ДОБАВЛЕНО

Если вы хотитеJQuery события для передачи (не рекомендуется), вам нужно повторно связать их.Что-то вроде: 

$('input').click(function() {

    alert('hey');

}).each(function() {

    var attrs = {},
        ta = $('<textarea>');

    $.each(this.attributes, function() {
       attrs[this.name] = this.value;
    });

    $.each($(this).data('events'), function(i, f) {
        $.each(f, function(){
            ta.bind(i, this.handler);
        });
    });

    $(this).replaceWith(ta.prop(attrs));

});​

http://jsfiddle.net/FyYDT/1/

1 голос
/ 04 марта 2012

Я бы просто перебрал атрибуты input s: 

function makeInputTextarea(inputElem) {
    var $textarea = $("<textarea></textarea>");
    $.each(inputElem.attributes, function(i, attrib){
        var name = attrib.name;
        var value = attrib.value;
        if(name === "type") return; // textareas don't have a "type" attribute
        $textarea.attr(name, value);
    });
    return $textarea;
}
0 голосов
/ 04 марта 2012 
$(function() {
    $('input[type="text"]').parent().each(function({
        $(this).html($(this).html().replace(/(<\/)input/gi, "$1textarea").replace(/(<textarea[^>]*)value\=['"](.*)['"]([^>]*)\/>/, "$1>$2</textarea>"));
    }));
});

Должен ли делать трюк?

Вы могли бы сделать 

$('input, textarea').live('click', function() {
    // do actions!
});

Для сохранения привязок

...