1

У меня есть множество полей ввода 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"/>

2 ответа 2

2

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

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

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

10
  • спасибо. а может есть какой то способ не заменяя на textarea как то расширить input text? проблема в том, что пользователям нужно вводить предложения и на компьютере все смотрится хорошо, но в телефоне уже все предложение не видно когда вводишь.
    – akasergej
    1 авг 2017 в 13:24
  • @akasergej CSS стили: media query. 1 авг 2017 в 13:29
  • но только горизонтально без переноса на след строку, как описал выше @AlexanderBragin
    – tcpack4
    1 авг 2017 в 13:30
  • ну так то я расширю, но текст ведь все равно не будет видно
    – akasergej
    1 авг 2017 в 13:32
  • 1
    @akasergej если вы PHP определяете мобильную версию, то не проще ли, прям в шаблоне и менять на textarea?
    – tcpack4
    1 авг 2017 в 13:51
0

Аттрибут 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>

4
  • В таком случае есть вероятность, что введенные данные пользователя потеряются (как писал ниже в комментариях)... Но ещё больший нюанс это будет с аналитикой форм :) 1 авг 2017 в 13:43
  • значение textarea всегда будет отсылатся постом, если есть тот же name, поскольку ниже.
    – tcpack4
    1 авг 2017 в 13:55
  • @tcpack4 ну так и не нужно называть эти поля одинаково. И вообще не факт, что эти поля должны быть внутри формы для отправки на сервер - в вопросе нет никаких name="..". Может быть при изменении значений в input и textarea будет заполняться какой-то массив или <input type="hidden" /> внутри какой-нибудь другой скрытой от пользователя формы. Это всё зависит от многих факторов. 1 авг 2017 в 14:44
  • @tcpack4 ещё можно использовать <textarea> всегда, а для "однострочного поля ввода" применить к ней resize: none; white-space: nowrap; overflow-x: hidden; height: ...px опять же через @media. Тогда и менять ничего не придётся. 1 авг 2017 в 15:05

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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