Статьи

Пользовательская текстовая область для Finicky в HTML5

Декабрь 10, 2018

Я делаю больше работы по переводу Finicky в HTML. Другим интерфейсом, который я хотел воспроизвести, был пользовательский ввод для полей заметок. Это в основном рисованная верхняя и нижняя часть для редактируемых пользователем заметок с рукописным шрифтом. Когда вы заполняете примечания, область расширяется, а нижняя часть перемещается вместе с расширением. Это еще одна крутая настройка пользовательского интерфейса, которую придумал мой дизайнер, и которую я хочу отметить в этой версии.

Мой первый проход в нем попытался использовать изображения границ, чтобы заполнить изображения как границы сверху и границы снизу на текстовой области. У меня была одна гигантская проблема: изображения CSS Border очень не поддерживаются . Я не мог заставить их работать в Chrome, и они, кажется, недоступны во многих браузерах, включая мобильные браузеры, на которые я нацеливаюсь.

Мой следующий проход использовал textarea. Я продвинулся немного дальше, но текстовые области статичны. Они не расширяются, чтобы соответствовать содержанию. На самом деле, это своего рода противоположность их намерениям. Они должны оставаться статичными для размещения большого количества контента. Я уверен, что мог бы сделать что-то с JavaScript, чтобы это произошло, но я ненавижу это делать. Нет разумной причины для этого. Я просто чувствую, что каждый раз, когда я использую JavaScript для решения проблемы отображения / стиля, я немного умираю изнутри. Если я могу сделать это в CSS, пусть будет так.

В моей следующей попытке использовался новый атрибут HTML5 «contenteditable». Contenteditable в основном говорит, что содержимое данного элемента доступно для редактирования пользователем. Это означает, что я могу просто создать div, который будет редактироваться пользователем. Div имеет дополнительное преимущество, заключающееся в возможности динамического изменения размера при поступлении нового контента. Это именно то, что я ищу.

Он отлично работает, пока я не использую его в своем мобильном приложении. Сюрприз, сюрприз, contenteditable еще не поддерживается на Android .

Итак, вернемся к манипуляциям с текстовой областью и JavaScript. (И маленький кусочек меня умирает.) Есть плагин jQuery, который будет расширять текстовую область большим количеством контента, но он казался немного тяжелым, так как я не использую jQuery в этом приложении. Основной метод довольно прост:

  • Создайте заполнитель для зеркала содержимого textarea
  • Создайте функцию для onkeyup для текстовой области, которая:

    • Устанавливает зеркальное содержимое как содержимое текстовой области
    • Хватает высоту зеркала
    • Устанавливает высоту текстовой области на эту высоту

HTML для текстовой записи

    <div id="notes">
    <textarea id="notes_content" onkeyup="resizeTextArea()">
    </textarea>
    <div id="notes_content_hidden"></div>
    </div>

JavaScript для текстового сообщения

    function resizeTextArea(){
    var content = document.querySelector("#notes_content");
    var container = document.querySelector("#notes_content_hidden");
    container.innerText = content.value;
    content.style.height = container.offsetHeight + "px";
    }

Основное решение изложено в этом посте на плагине textArea jQuery .

Я пошел еще дальше и создал CSS-переход, который сглаживает изменение высоты текстовой области.

CSS для текстового сообщения

    #notes {
    width: 400px;
    background-image: url('noteTop.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position-x: center;
    background-position-y: 0;
    }
     
    #notes_content{
    display: block;
    width: 340px;
    min-height: 100px;
    background: none;
    border:none;
    background-image: url('noteBottom.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position-x: center;
    background-position-y: 100%;
    padding: 30px;
    outline: 0;
    overflow: hidden;
     
    -webkit-transition: height 0.5s ease-out; /* Saf3.2+, Chrome */
    -moz-transition: height 0.5s ease-out; /* FF4+ */
    -ms-transition: height 0.5s ease-out; /* IE10? */
    -o-transition: height 0.5s ease-out; /* Opera 10.5+ */
    transition: height 0.5s ease-out;
    }
     
     
    #notes_content_hidden{
    display: block;
    width: 440px;
    min-height: 100px;
    background: none;
    padding: 30px;
    outline: 0;
    visibility: hidden;
    position: fixed;
    }

Это долгий путь, чтобы это сделать, но это работает. Вот рабочая демонстрация этого.

 

Источник: http://www.terrenceryan.com/blog/post.cfm/a-custom-textarea-for-mobile-apps

 

35
Share: