I have a lot of input text input fields, which I want to replace with textarea if a person enters from the phone. How to replace, I know, but how do I transfer the data-answer parameters to the replaced textarea so that <textarea data-answer=""> would be obtained?

 $(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 answers 2

    Properly necessary to make a separate template for the mobile version.

    But below is the answer to the current implementation.

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

    • thank. But maybe there is some way without replacing it with textarea, how can I expand input text? the problem is that users need to enter sentences and everything looks good on the computer, but the phone doesn’t see the whole sentence when you enter. - akasergej
    • @akasergej CSS styles: media query . - Alexander Bragin
    • but only horizontally without moving to the next line, as described above @AlexanderBragin - tcpack4
    • Well, then I will expand, but the text will not be visible anyway - akasergej
    • one
      @akasergej if you determine the mobile version of PHP, is it not easier, right in the template and change to textarea? - tcpack4

    The data-answer can be stored in the parent container, and input and textarea show / hide using mutually exclusive @media for example.

     .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>

    • In this case, it is likely that the entered user data will be lost (as I wrote in the comments below) ... But it will be even more nuanced with form analytics :) - Alexander Bragin
    • the textarea value will always be sent by post if it has the same name, as below. - tcpack4
    • @ tcpack4 well, you don’t need to call these fields the same. And in general it’s not a fact that these fields should be inside the form to be sent to the server - there’s no name=".." in the question. Maybe when changing values ​​in input and textarea some array will be filled in or <input type="hidden" /> inside some other form hidden from the user. It all depends on many factors. - Andrey Mindubayev
    • @ tcpack4 can still be used <textarea> always, and for the "one-line input field" apply resize: none; white-space: nowrap; overflow-x: hidden; height: ...px to it resize: none; white-space: nowrap; overflow-x: hidden; height: ...px resize: none; white-space: nowrap; overflow-x: hidden; height: ...px resize: none; white-space: nowrap; overflow-x: hidden; height: ...px again via @media . Then nothing will have to change. - Andrey Mindubayev