Как поместить кнопку очистки внутри моего поля ввода текста HTML, как это делает iPhone? - PullRequest
Новая
       52

Как поместить кнопку очистки внутри моего поля ввода текста HTML, как это делает iPhone?

112 голосов
/ 10 мая 2010

Я хочу иметь симпатичную маленькую иконку, которая при нажатии очистит текст в поле .

Это для экономии места, а не для четкой связи за пределами поля ввода.

Мои навыки CSS слабы ... Вот скриншот фотография того, как выглядит iPhone.

Ответы [ 8 ]

120 голосов
/ 12 февраля 2016

В настоящее время с HTML5 все довольно просто: 

<input type="search" placeholder="Search..."/>

Большинство современных браузеров по умолчанию автоматически отображают удобную кнопку очистки в поле.

plain HTML5 search input field

(Если вы используете Bootstrap, вам нужно добавить переопределение в ваш CSS-файл, чтобы он отображался) 

input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
}

bootstrap search input field

Браузеры Safari / WebKit также могут предоставлять дополнительные функции при использовании type="search", такие как results=5 и autosave="...", но они также переопределяют многие из ваших стилей (например, высота, границы). Чтобы предотвратить эти переопределения, сохраняя при этом функциональность, например, кнопку X, вы можете добавить это к своему CSS: 

input[type=search] {
    -webkit-appearance: none;
}

См. css-tricks.com для получения дополнительной информации о функциях, предоставляемых type="search".

91 голосов
/ 10 мая 2010

@ thebluefox суммировал больше всего. Вы также вынуждены использовать JavaScript, чтобы эта кнопка работала в любом случае. Вот SSCCE, вы можете скопировать и запустить его: 

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 2803532</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function() {
                $('input.deletable').wrap('<span class="deleteicon" />').after($('<span/>').click(function() {
                    $(this).prev('input').val('').trigger('change').focus();
                }));
            });
        </script>
        <style>
            span.deleteicon {
                position: relative;
            }
            span.deleteicon span {
                position: absolute;
                display: block;
                top: 5px;
                right: 0px;
                width: 16px;
                height: 16px;
                background: url('http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4') 0 -690px;
                cursor: pointer;
            }
            span.deleteicon input {
                padding-right: 16px;
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>
        <input type="text" class="deletable">
    </body>
</html>

Живой пример здесь .

jQuery , кстати, не нужен, он просто прекрасно отделяет логику, необходимую для прогрессивного улучшения, от источника, конечно, вы также можете продолжить с plain HTML / CSS / JS: 

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 2803532, with "plain" HTML/CSS/JS</title>
        <style>
            span.deleteicon {
                position: relative;
            }
            span.deleteicon span {
                position: absolute;
                display: block;
                top: 5px;
                right: 0px;
                width: 16px;
                height: 16px;
                background: url('http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4') 0 -690px;
                cursor: pointer;
            }
            span.deleteicon input {
                padding-right: 16px;
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>
        <span class="deleteicon">
            <input type="text">
            <span onclick="var input = this.previousSibling; input.value = ''; input.focus();"></span>
        </span>
    </body>
</html>

В итоге вы получите только более уродливый HTML (и не совместимый с JS;);)).

Обратите внимание, что когда внешний вид пользовательского интерфейса вас не беспокоит, но функциональность такова, тогда просто используйте <input type="search"> вместо <input type="text">. На браузерах с поддержкой HTML5 будет отображаться кнопка очистки (для браузера).

37 голосов
/ 08 мая 2014

HTML5 вводит тип ввода «поиск», который, я считаю, делает то, что вы хотите.

<input type="search" />

Вот живой пример .

24 голосов
/ 13 сентября 2012

Проверьте наш jQuery-ClearSearch плагин. Это настраиваемый плагин jQuery - легко адаптировать его к вашим потребностям путем стилизации поля ввода. Просто используйте его следующим образом: 

<input class="clearable" type="text" placeholder="search">

<script type="text/javascript">
    $('.clearable').clearSearch();
</script>

Пример: http://jsfiddle.net/wldaunfr/FERw3/

16 голосов
/ 10 мая 2010

Вы, к сожалению, не можете поместить его в текстовое поле, только сделайте так, чтобы оно выглядело как внутри него, что, к сожалению, означает, что нужен некоторый css: P

Теория состоит в том, чтобы обернуть ввод в div, убрать все границы и фоны из ввода, а затем оформить div так, чтобы он выглядел как рамка. Затем вставьте свою кнопку после поля ввода в коде и хороших заданий.

Как только у вас все равно получится;)

3 голосов
/ 30 апреля 2015

У меня есть креативное решение, я думаю, что вы ищете 

$('#clear').click(function() {
  $('#input-outer input').val('');
});
body {
  font-family: "Tahoma";
}
#input-outer {
  height: 2em;
  width: 15em;
  border: 1px #e7e7e7 solid;
  border-radius: 20px;
}
#input-outer input {
  height: 2em;
  width: 80%;
  border: 0px;
  outline: none;
  margin: 0 0 0 10px;
  border-radius: 20px;
  color: #666;
}
#clear {
  position: relative;
  float: right;
  height: 20px;
  width: 20px;
  top: 5px;
  right: 5px;
  border-radius: 20px;
  background: #f1f1f1;
  color: white;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
}
#clear:hover {
  background: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input-outer">
  <input type="text">
  <div id="clear">
    X
  </div>
</div>

https://jsfiddle.net/qdesign/xn9eogmx/1/

1 голос
/ 09 марта 2018

Конечно, лучший подход - использовать постоянно поддерживаемую <input type="search" />.

В любом случае, для небольшого удовольствия от кодирования я подумал, что этого можно достичь также с помощью кнопки сброса формы, и это рабочий результат (стоит отметить, что при таком подходе нельзя использовать другие входы, кроме поля поиска или сброса Кнопка также сотрет их), JavaScript не требуется: 

form > div{
    position: relative;
    width: 200px;
}

form [type="text"] {
    width: 100%;
    padding-right: 20px;
}

form [type="reset"] {
    position: absolute;
    border: none;
    display: block;
    width: 16px;
    border-radius: 20px;
    top: 2px;
    bottom: 2px;
    right: -20px;
    background-color: #ddd;
    padding: 0px;
    margin: 0px;
}
<form>
	<div>
		<input type="text" />
		<input type="reset" value="X" />
	</div>
</form>
0 голосов
/ 03 ноября 2016

@ Махмуд Али Касим

Я только что изменил CSS, чтобы он выглядел иначе, и добавил focus ();

https://jsfiddle.net/xn9eogmx/81/

$('#clear').click(function() {
  $('#input-outer input').val('');
  $('#input-outer input').focus();
});
body {
  font-family: "Arial";
  font-size: 14px;
}
#input-outer {
  height: 2em;
  width: 15em;
  border: 1px #777 solid;
  position: relative;
  padding: 0px;
  border-radius: 4px;
}
#input-outer input {
  height: 100%;
  width: 100%;
  border: 0px;
  outline: none;
  margin: 0 0 0 0px;
  color: #666;
  box-sizing: border-box;
  padding: 5px;
  padding-right: 35px;
  border-radius: 4px;
}
#clear {
  position: absolute;
  float: right;
  height: 2em;
  width: 2em;
  top: 0px;
  right: 0px;
  background: #aaa;
  color: white;
  text-align: center;
  cursor: pointer;
  border-radius: 0px 4px 4px 0px;
}
#clear:after {
  content: "\274c";
  position: absolute;
  top: 4px;
  right: 7px;
}
#clear:hover,
#clear:focus {
  background: #888;
}
#clear:active {
  background: #666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input-outer">
  <input type="text">
  <div id="clear"></div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...