На сайте создал поиск с полем input
и type="search"
, разметка Bootstrap 4
В мобильных приложениях где есть Поиск
, когда нажимаешь в поле Поиск
появляется клавиатура для ввода. Чтоб её закрыть - вверху окна клавиатуры есть кнопка Готово
или Ввод
- разная реализация, смысл один. Второй способ - это нажать кнопку Отмена
, которая появляется справа от поля Поиск
Еще вариант нажать "вне" поля Поиск
. Важное замечание, при введенных данных в Поиск
, закрыть клавиатуру нажатием "вне" поля Поиск
не выйдет, так как "вне" - это ссылки с вариантами ответов на запрос
Хочу подобное реализовать для сайта
$(document).on('ready', function () {
/* Изменение ширины input при фокусе */
$('#search').on('focus', function (event) {
var input = $('#search').outerWidth()
if ($('#search').val() === '') {
$('#search').after($('<button>', {
'class': 'btn btn-primary close-btn',
'text': 'Отмена'
}))
console.log('#1 - (focus) input пустой')
} else {
$('#search').after($('<button>', {
'class': 'btn btn-primary close-btn',
'text': 'Отмена'
}))
console.log('#2 - (focus) input не пустой, введенно ->', $('#search').val())
}
var button = $('.close-btn').outerWidth()
var result = input - button
$('#search').outerWidth(result)
})
/* Деактивация input при нажатии вне input */
/* Если input не пуст, ждем выбора одного из */
/* ответов "Поиска" что вызовет переход на другую */
/* страницу или "Очистки" поля input */
$('#search').on('blur', function (event) {
if ($('#search').val() === '') {
$('.close-btn').detach()
$('#search').css('width', '100%')
console.log('#3 - (blur) input пустой')
} else {
$('.close-btn').detach()
$('#search').css('width', '100%')
console.log('#4 - (blur) input не пустой, введенно ->', $('#search').val())
}
})
/* Деактивация input при нажатии на кнопку "Отмена" */
$('.close-btn').on('click', function (event) {
$('.close-btn').detach()
console.log('#5 - (click) input закрыт кнопкой')
})
})
.btn {
margin-left: 15px;
}
/* Не работает */
#search {
transition: width 1s;
-webkit-transition: width 0.4s;
-moz-transition: width 0.4s;
-o-transition: width 0.4s;
}
/* Не работает */
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- JQuery JS -->
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
</head>
<body class="bg-dark">
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-primary">
<div class="container">
<input type="search" id="search" class="form-control" placeholder="Поиск..." aria-label="Search">
</div>
</nav>
</body>
</html>
Практически получилось. Попытка сделать проверку на пустоту поля input
не удалась. Кнопка Отмена
и событие click
никак не хотят работать. Вместо этого срабатывают только события focus
- нажатие на поле input
, так же событие blur
- нажатие "вне" поля input
. Причем не зависимо пуст input
или нет
1). Как правильно рассчитать ширину поле input
так, чтоб в дескпотной и мобильном варианте сайта, кнопка Отмена
появлялась только справа поля input
?
2). Как исправить ошибку с проверкой поля input
на пустоту, чтоб при введенных данных в поле input
его можно было закрыть только кнопкой Отмена
=> событием click
?
Возможно проблема из-за того, что события focus
и blur
работают с элементами по id
, а событие click
по class
Update
Не понимаю как это работает --padding
в формуле расчета ширины input
. И почему внутренние отступы --padding
, а не внешние --margin
. Правда в Bootstrap 4
нету внешних --margin
отступов как Я увидел, только в conteiner
родительском блоке. У button
еще по умолчанию display: inline-block;
он только в десктоп расширении работает, тоже не понимаю как, раз input
постоянно width: 100%; и display: block;
. Родительский conteiner
имеет display: flex;
. Вышло так у меня https://jsfiddle.net/15ey34m6/7/
--margin-left
не определенаtransition: 1s !important;
position absolute
--margin-left: 15px