Как можно реализовать сброс введенных данных внутри самого input
? Скажем, добавить крестик справа, при нажатии на который происходит сброс введенных значений. Я могу сделать кнопку рядом для сброса, но не знаю как поместить крестик вовнутрь. Мне не нужно добавлять иконку, нужна лишь стандартная отмена
-
3Возможный дубликат вопроса: Как вставить иконку в input– Air14 окт 2017 в 10:41
-
Внизу есть более простой способ для добавления сброса– Denis Evceev14 окт 2017 в 11:47
-
Возможный дубликат вопроса: Как вставить в input шрифтовую иконку?– αλεχολυτ ♦14 окт 2017 в 17:27
-
да вы че прикалываетесь что ли? Какой дубликат– Denis Evceev14 окт 2017 в 17:42
Добавить комментарий
|
3 ответа
Можно воспользоваться input type="search"
<input type="search">
Ну и если вам нужно через js то вот
x-field{
display:inline;
position:relative;
}
x-field .close {
position:absolute;
padding:0 5px;
right:0;
}
<x-field>
<input type="text" id = "text">
<span class="close" onclick="this.previousElementSibling.value = ''">
×
</span>
</x-field>
-
-
-
"1 - Does not use a special search-specific UI for the field" - вот это вот у меня) 19 окт 2017 в 16:23
-
кажется да, надо стилизовать– user24515019 окт 2017 в 16:25
Можно попробовать задать родителю position
отличный от static
, например,
position:relative
, а кнопке position:absolute
и с помощью left
, right
, top
, bottom
разместить её, где нужно.
Вот посмотри здесь
var input = document.querySelector('input');
input.addEventListener('click', function(event) {
event = event || window.event;
if (event.offsetX < 51) {
input.value = '';
}
})
input.addEventListener('mousemove', function(event) {
event = event || window.event;
if (event.offsetX < 51) {
input.style.cursor = 'pointer';
}else{
input.style.cursor = 'text';
}
})
@import "http://fonts.fontstorage.com/import/adventpro.css";
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
background-color: #065b79;
overflow: auto;
}
input {
position: absolute;
top: 100px;
left: 100px;
height: 50px;
width: 400px;
padding-left: 55px;
background-color: transparent;
background-image: url(http://nouveal.com/wp-content/themes/html5blank-stable-nouveal/img/[email protected]);
background-repeat: no-repeat;
outline: none;
color: #fff;
text-align: left;
font-size: 35px;
font-family: 'Advent';
border: 0;
border-bottom: .1px solid #fff;
}
input::placeholder {
color: #fff;
text-align: center;
}
<input type="text" placeholder="FiFa">