То, как я помещаю ясную кнопку в своем поле ввода текста HTML как iPhone, делает?
Я хочу иметь миленький значок, который при нажатии очистит текст в поле <INPUT>.
Это должно оставить свободное место вместо того, чтобы иметь четкую ссылку за пределами поля ввода.
Мои навыки CSS слабы... Вот фотография снимка экрана того, как iPhone выглядит.
2 ответа
@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 ;)).
Обратите внимание, что если внешний вид пользовательского интерфейса не является вашей главной заботой, но функциональность важна, то просто используйте вместо . Это покажет (специфическую для браузера) кнопку очистки в браузерах, поддерживающих HTML5.
К сожалению, вы не можете поместить его в текстовое поле, только сделайте так, чтобы он выглядел так, как будто он внутри него, что, к сожалению, означает, что требуется некоторый css: P
Теория заключается в том, чтобы заключить ввод в div, убрать все границы и фон с ввода, а затем стилизовать div так, чтобы он выглядел как прямоугольник. Затем вставьте свою кнопку после поля ввода в коде, и рабочие места будут хороши.
Как только вы все равно заставите его работать;)