0

Подскажите, пожалуйста, как изменить тип элемента c 'input' на 'textarea' с определенным классом, но чтобы другие 'textarea' или 'input' при этом не были бы изменены, используя jQuery.

Было:

<input class="field" id="ex" name="ex" type="text" value="">

Стало:

<textarea class="field" id="ex" name="ex" type="text" value="">

1 ответ 1

2

function changeTagName(el, newTagName) {
  var n = document.createElement(newTagName);
  var attr = el.attributes;
  for (var i = 0, len = attr.length; i < len; ++i) {
    n.setAttribute(attr[i].name, attr[i].value);
  }
  n.innerHTML = el.innerHTML;
  el.parentNode.replaceChild(n, el);
}

changeTagName(document.getElementById('ex'), 'textarea');
<input class="field" id="ex" name="ex" type="text" value="" />

UPD.

$("#ex").each(function (o, elt) {
  var newElt = $("<textarea />");
  Array.prototype.slice.call(elt.attributes).forEach(function(a) {
    newElt.attr(a.name, a.value);
  });
  $(elt).wrapInner(newElt).children(0).unwrap();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="field" id="ex" name="ex" type="text" value="">

6
  • Спасибо, а можно тоже самое с помощью Jquery провернуть?
    – arantar
    3 фев 2019 в 14:55
  • @arantar, можно, обновил.
    – meine
    3 фев 2019 в 15:07
  • Это не сработает, id у меня неизвестен заранее, а тут в качестве примера привел. Нужно именно по классу элемента. Суть проблемы: выбираешь определенный select - поле input меняется на textarea и обратно, если выберешь другое значение. Id, класс и т.д. сохраняются. Причем такие блоки с select'ом и input/textarea создаются самим пользователем, т.е. есть контекст.
    – arantar
    3 фев 2019 в 15:22
  • Нужно что-то этого, но это не совсем правильно работает: jsfiddle.net/gvof27su
    – arantar
    3 фев 2019 в 15:25
  • @arantar, в следующий раз, пожалуйста, конкретизируйте вопрос, чтобы не было таких казусов.
    – meine
    3 фев 2019 в 15:26

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.