заменить input text на textarea

229

02 августа 2017, 21:01

У меня есть множество полей ввода input text, которые я хочу заменять на textarea если человек входит с телефона. Как заменить я знаю, но как в замененную textarea передать параметры data-answer что бы получались <textarea data-answer="">?

$(document).ready(function(){ 
    $("input[type=text]").each(function(){ 
        $(this).after('<textarea></textarea>').remove() 
    }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<input type="text" data-answer="text 1"/> 
<input type="text" data-answer="text 2"/> 
<input type="text" data-answer="text 3"/>

Answer 1

Правильно необходимо сделать отдельный шаблон для мобильной версии.

Но ниже ответ на текущую реализацию.

$(document).ready(function(){ 
    $("input[type=text]").each(function(){ 
        $(this).after($('<textarea></textarea>').attr('data-answer', $(this).attr('data-answer'))).remove() 
    }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<input type="text" data-answer="text 1"/> 
<input type="text" data-answer="text 2"/> 
<input type="text" data-answer="text 3"/>

Answer 2

Аттрибут data-answer можно хранить в родительском контейнере, а input и textarea показывать/скрывать при помощи взаимоисключающих @media например.

.input-container .input-media { 
  display: none; 
} 
@media all and (orientation: portrait) { 
  .input-container .media-portrait { 
     display: block; 
  } 
} 
@media all and (orientation: landscape) { 
  .input-container .media-landscape { 
     display: block; 
  } 
}

<div class="input-container" data-answer="Answer 3"> 
  <input type="text" class="input-media media-landscape" /> 
  <textarea class="input-media media-portrait"></textarea> 
</div>

Создание сайта для строительной компании в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Расширение для Chrome, ошибка с обработчиком событий

У меня есть расширение для хрома (уже опубликовано), но есть проблемаВ окне расширения (popup

292

CSS

Анимированное появление тени у path svg

Реализовала появление тени при наведении у path svg:

273

MySQL

Помогите разобраться с запросом

Есть запрос, но в нем нету 1 поля с таблицы images "SELECT id, name, url, description, visible, price, amount FROM products WHERE id = $id"; Есть запрос с join где как раз объединил 2 таблицы,...

213

MySQL

Как достать данные из MySQL

271