Я хочу мати маленьку маленьку піктограму, яка при натисканні видалить текст у вікні <INPUT>.
Це для економії місця, а не для того, щоб мати чітке посилання поза полем для введення.
Мої навички CSS слабкі ... Ось фото на скріншоті того, як виглядає iPhone.
Відповіді:
@thebluefox узагальнив найбільше. Ви також змушені використовувати JavaScript, щоб все-таки ця кнопка працювала. Ось SSCCE, ви можете скопіювати'n'paste'n'run:
<!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 , до речі, не потрібен, він просто добре відокремлює логіку, необхідну для прогресивного вдосконалення від вихідного, ви, звичайно, також можете продовжувати звичайний 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;), не сумісний із кроссбордсом).
Зауважте, що коли UI look'n'feel не є вашою найбільшою турботою, але функціональність є, тоді просто використовуйте <input type="search">замість цього <input type="text">. Він відобразить кнопку (очищення від конкретного браузера) для браузерів, що підтримують HTML5.
class="fa fa-remove"внутрішнього прольоту, щоб відобразити хороший значок хреста
top:дочірній проміжок і встановивши display: flex; align-items: center;в батьківський проміжок.
На сьогоднішній день з HTML5 це досить просто:
<input type="search" placeholder="Search..."/>Більшість сучасних браузерів автоматично виводить корисну чисту кнопку в поле за замовчуванням.
(Якщо ви використовуєте Bootstrap, вам доведеться додати перезапис у файл css, щоб він відображався)
input[type=search]::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button;
}
Веб-браузери Safari / WebKit також можуть надавати додаткові функції при використанні type="search", як-от results=5і autosave="...", але вони також перекривають багато ваших стилів (наприклад, висоту, межі). Щоб запобігти цим перекриттям, зберігаючи функціональність, наприклад кнопку X, ви можете додати це до свого css:
input[type=search] {
-webkit-appearance: none;
}Перегляньте сторінку css-tricks.com для отримання додаткової інформації про функції, які надає компанія type="search".
HTML5 представляє тип введення "Пошук", який, на мою думку, робить те, що вам потрібно.
<input type="search" />
Ось живий приклад .
Перевірте наш плагін jQuery-ClearSearch . Це налаштований плагін jQuery - адаптувати його до ваших потреб шляхом стилізації поля введення просто. Просто використовуйте його наступним чином:
<input class="clearable" type="text" placeholder="search">
<script type="text/javascript">
$('.clearable').clearSearch();
</script>Приклад: http://jsfiddle.net/wldaunfr/FERw3/
На жаль, ви не можете помістити його в текстове поле, на жаль, лише зробіть його схожим на його всередині, що, на жаль, означає, що потрібен деякий css: P
Теорія полягає в загортанні введення в розділ, зніміть усі межі та фони від введення, а потім накресліть поділ так, щоб він виглядав як поле. Потім вкажіть кнопку після поля введення коду та завдань good'un.
Після того, як ви все одно працюєте;)
Я отримав креативне рішення, я думаю, що ви шукаєте
$('#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>Звичайно, найкращим підходом є використання постійно підтримуваних <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>Можливо, це просте рішення допоможе:
<input type="text" id="myInput" value="No War"/><button onclick="document.getElementById('myInput').value = ''" title="Clear">X</button></input>@Mahmoud Ali Kaseem
Я щойно змінив деякі CSS, щоб він виглядав інакше, і додав фокус ();
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>