предисловие
INPUT — это общий тег данных от пользователя.В фронтенд-разработке я считаю, что все будут использовать этот тег, поэтому в процессе разработки я столкнусь с некоторыми проблемами.Содержание этой статьи — я убиваю с помощью INPUT. Процесс генерируется во время этой записи. Если вам это нравится, вы можете нажать на Powabar / Follow, поддержать его, я надеюсь, что каждый может что-то получить.
Личный блог, чтобы узнать:obkoro1.com
Эта статья включает в себя:
- Нижний ввод мобильного терминала заблокирован всплывающей клавиатурой.
- Управление вводом отображения/скрытия пароля.
- Ввод эмодзи во ввод приводит к сбою запроса.
- ввод Многострочный ввод отображает новые строки.
- Очистить пробелы в начале и конце поля ввода - trim()
- Прослушивание событий клавиатуры при вводе
Нижний ввод мобильного терминала заблокирован всплывающей клавиатурой
Поле ввода черезposition:fixedОн был размещен внизу страницы.При нажатии на вход для входа появится следующая картинка (некоторые модели будут блокировать некоторые).
В то время с этой проблемой столкнулись в ios в прошлом году.В последней версии системы ios вроде этот баг решен, но для обратной совместимости и предотвращения этой проблемы с других моделей можно запомнить вот это раствор немного..
При решении этой проблемы я пробовал следующие методы:
В событии Фокус ввода включите таймер, затем выполните Document.Body.ScrollTop = Document.Body.ScrollTop = Document.Body.ScrollTop = Document.Body.ScrollTop = Document.Body.ScrollHeight, выполните 3 раза.
Я думал, что в то время это было решено, но когда у вас много контента в области комментариев внизу, каждый раз, когда вы нажимаете на ввод и хотите войти, вся страница проходитscrollTopОн будет продолжать прокручиваться вниз. Само собой разумеется, я знаю, что этот опыт довольно неудачный, и тогда я найду решение. Результат следующий.
Element.scrollIntoView()
Element.scrollIntoView():методПрокручивает текущий элемент в видимую область окна браузера.
document.querySelector('#inputId').scrollIntoView();
//只要在input的点击事件，或者获取焦点的事件中，加入这个api就好了
Этот API также может установить метод выравнивания, выбрать размещение ввода выше/ниже экрана, аналогичные API:Element.scrollIntoViewIfNeeded(), эти два решают одну и ту же проблему, просто выберите один из них.
Управление дисплеем INPUT / скрытым кодом
Это очень просто, просто измените значение атрибута типа ввода. Вы можете взглянуть на codependemo
//点击函数，获取dom，判断更改属性。
show(){
let input=document.getElementById("inputId");
if(input.type=="password"){
input.type='text';
}else{
input.type='password';
}
}
Ввод эмодзи во ввод приводит к сбою запроса
Теперь у пользователей стало привычкой вводить смайлики.Если фронт и бэкэнд не обрабатывают выражения эмодзи, пользователь не сможет запросить при загрузке.
Обычно эту проблему лучше решать на заднем конце., фронтенд этого сделать не может, или сделать это сложно.
видел один раньшестатья, В этой статье рассказывается о том, как не сообщать об ошибках при загрузке и снятии данных, но нельзя конвертировать их в смайлики при отображении.
ps: при использовании имени пользователя WeChat некоторые люди могут включать выражения в псевдоним WeChat.Если бэкенд не преобразует выражение, то и обычный запрос тоже пойдет не так.
Причина, по которой я говорю это, заключается в том, что когда форма запроса неверна, если вы действительно не можете найти проблему, вы можете подумать об этом в этом отношении Меня действительно обманули о (╥﹏╥)о.
textarea многострочный возврат каретки, настройка перевода строки при отображении:
в настоящее время используетtextareaКогда метка вводит многострочный текст, если многострочный текст не отображается и не обрабатывается, это не приведет к разрыву строки, например, в следующей ситуации: пользователь находится вtextareaЕсть разрывы строк.
Свойство CSS:white-space
Свойство white-space используется для установки способа обработки пробелов внутри элемента, включая пробелы и разрывы строк.
покаТам, где отображается содержимое, установите для этого свойства значениеwhite-space: pre-lineилиwhite-space:pre-wrap, многострочный текст можно переносить.
После настройки эффект отображения:
Очистить пробелы в начале и конце поля ввода - trim()
Очистка начального и конечного пробелов в поле ввода является распространенным требованием для ввода.Обычно начальные и конечные пробелы удаляются при загрузке. Общее использование: собственные методы для строкtrim()Удалить пробельные символы с обоих концов строки.
Метод trim() не влияет на исходную строку, он возвращает новую строку.
Родной метод очистки:
//原生方法获取值，清除首尾空格上传str2
var str2 = document.getElementById("inputId").trim();
Метод очистки Vue:
Vue предоставляетмодификаторУдалите начальные и конечные пробелы, добавьте модификаторы.trimАвтоматически фильтрует начальные и конечные пробельные символы, введенные пользователем.
<input v-model.trim="msg">
Похоже, что angular также предоставляет подобный метод фильтрации, если вам интересно, вы можете проверить это самостоятельно.
Прослушивание событий клавиатуры при вводе
Когда пользователь входит в систему или в поле поиска, он обычно прослушивает события клавиатуры и связывает клавишу Enter для выполнения таких операций, как вход/поиск.
Родная привязка:
<input onkeydown="keydownMsg(event)" type="text" />
function keydownMsg(key) {
keyCode = key.keyCode; //获取按键代码
if (keyCode == 13) { //判断按下的是否为回车键
// 在input上监听到回车 do something
}
}
Ключевые модификаторы Vue
Vue обеспечивает мониторинг событий клавиатурыключевой модификатор, и предоставляет псевдонимы для часто используемых клавиш.Использование заключается в следующем: когда клавиша Enter нажата во входных данных, функция внутри будет запущена.
<input @keyup.enter="enterActive">
Эпилог
Вышеприведенный контент является решением некоторых проблем с вводом, с которыми я столкнулся, и некоторых вещей, связанных с вводом.Если есть какие-либо ошибки, пожалуйста, поправьте меня! Я надеюсь, что вы сможете получить что-то после прочтения. Если вам это нравится, поторопитесь и нажмитеподпискаПодпишитесь/Нравится, удобно на потомнайтикопипаст, 233.
Я надеюсь, что друзья, которые прочитали это, могут нажать «Нравится» / «Подписаться», ваша поддержка — самая большая поддержка для меня.
личный блог and Персональная домашняя страница Nuggets, если вам нужно перепечатать, пожалуйста, поставьте ссылку на исходный текст и подпишите его. Кодировать не просто,благодарныйслужба поддержки! Я пишу статью с менталитетом биржевых записей, и не хочу ее рвать, но приветствую подсказки.
Если вам понравилась эта статья, вы можете обратить внимание на подписную учетную запись, которую я только что открыл, долгий путь к технологиям и с нетерпением ждем возможности учиться и расти вместе в будущем.
Выше 2018.5.12