Как изменить размер гибкой текстовой области на мобильном устройстве?

На компьютере легко изменить размер текстового поля, например:

<textarea>

http://jsfiddle.net/sssdpepa/

вы просто щелкаете и перетаскиваете предмет в нижнем правом углу. Но на мобильных устройствах я не могу изменить размер одного и того же текстового поля. Есть что-то, что мне не хватает? Или мне нужно каким-то образом добавить возможности изменения размера мобильного контента?

ОТВЕТЫ

Ответ 1

Большинство мобильных браузеров не поддерживают свойство CSS resize - это то, что дает текстовые области с изменяемым размером.

Проверьте, какие браузеры поддерживают изменение размера: http://caniuse.com/#search=resize

Нет простого способа "добавить изменение размера мобильного телефона". Думаю, вы все равно могли бы сделать это взломанным способом, но настоятельно не рекомендуется. Логика, вероятно, будет примерно такой:

  • Установить resize:none.
  • Используйте HTML + CSS + img (SVG), чтобы создать небольшую вкладку изменения размера в правом нижнем углу.
  • Используйте JS для прослушивания событий перетаскивания (возможно, вам нужна специальная библиотека событий прикосновений) на вкладке изменения размера.
  • Логика прослушивателя:
    • Увеличьте высоту элемента с помощью расстояния перетаскивания, если перетащить вниз, но не увеличивайте его за максимальную высоту CSS/style.
    • Уменьшить высоту элемента путем перетаскивания, если перетащить вверх, но не уменьшаться за минимальную высоту CSS/style.
    • Аналогично, увеличивайте ширину, если перетащить вправо, но не превышайте установленную максимальную ширину.
    • Аналогично, уменьшите ширину, если перетащить влево, но не уменьшайте ее за заданную минимальную ширину.
    • Если родительский элемент имеет фиксированную ширину/высоту, не позволяйте пользователю изменять размер за пределами родительских размеров.
    • Если родительский элемент является автоматической шириной/высотой, вам может потребоваться отрегулировать позиции прокрутки соответственно, если изменение размера элемента превысит родительские ребра. (Вам также может потребоваться выполнить какое-либо полевое тестирование, чтобы наблюдать, если изменение родительского элемента scrollTop/scrollLeft закручивает ваше обнаружение перетаскивания).

В целом, я бы сказал, что это не стоит реализовывать на мобильных устройствах. Также, вероятно, хорошо не допускать изменения размера на мобильном телефоне, учитывая ограниченную экранную недвижимость. Что касается браузеров IE/Edge, дождитесь завершения спецификации спецификаций модуля CSS, и MS, вероятно, выполнит его.

Ответ 2

Я не думаю, что он может стать меньше, изменение строк /cols в CSS не изменит его внешний вид. Вы можете сделать это больше (используя вышеуказанные свойства) и установить его в зависимости от размера экрана. См:

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Ответ 3

Вы можете использовать свойство изменить размер для textarea, которое отлично работает во всех браузерах, кроме IE. Чтобы обеспечить совместимость со всеми браузерами, вы можете использовать ниже плагин JQuery UI для достижения того же.

http://jqueryui.com/resizable/

Ответ 4

Вы можете использовать библиотеку jQuery UI Touch Punch (http://touchpunch.furf.com)

jQuery UI Touch Punch - это небольшой взлом, который позволяет использовать сенсорные события на сайтах с помощью пользовательской интерфейсной библиотеки jQuery.