1

Как можно реализовать сброс введенных данных внутри самого input? Скажем, добавить крестик справа, при нажатии на который происходит сброс введенных значений. Я могу сделать кнопку рядом для сброса, но не знаю как поместить крестик вовнутрь. Мне не нужно добавлять иконку, нужна лишь стандартная отмена

4

3 ответа 3

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 = ''">
&times;
</span>
</x-field>

4
  • i.stack.imgur.com/YPQkc.png
    – andreymal
    19 окт 2017 в 10:16
  • не знаю что у вас, caniuse.com/#feat=input-search
    – user245150
    19 окт 2017 в 16:18
  • "1 - Does not use a special search-specific UI for the field" - вот это вот у меня)
    – andreymal
    19 окт 2017 в 16:23
  • кажется да, надо стилизовать
    – user245150
    19 окт 2017 в 16:25
0

Можно попробовать задать родителю position отличный от static, например, position:relative, а кнопке position:absolute и с помощью left, right, top, bottom разместить её, где нужно.

Вот посмотри здесь

0

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">

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.