How to insert a delete icon to text input and implement deleting text [closed]

Question

I create the following text input:

<input type="text" class="signup-input text-value" name="" placeholder="e.g. [email protected]">

I have to implement a delete function (with an "x" icon which is displayed in the end of the input).

Answer 1

You could set the type to search :

<input type="search" class="signup-input text-value" name="" placeholder="e.g. [email protected]">

type="search" will add a x button inside the input, that deletes the content when clicked.

fiddle -> http://jsfiddle.net/rnfp59jg/

Support for type="search" by modern browsers, from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input :

Feature     Chrome  Firefox (Gecko) IE  Opera   Safari
type=search 5.0     4.0 (2.0)       10  11.01   (Yes)

Answer 2

A good cross browser option would be to:

---

Place your input in a div, and then you can position your 'x' absolutely. That way you can control how your browser will render the 'X'.

I've also included a fading transition, as well as the event handler itself:

$(document).ready(function() {

  $('.ex').click(function() {
    $('.signup-input').val("");
  });
});

.wrap input,
.wrap .ex {
  display: inline-block;
}
.wrap {
  position: relative;
  width: 50%;
  height: 30px;
}
.ex {
  position: absolute;
  right: 0;
  top: 10%;
  height: 30px;
  width: 30px;
  opacity: 0;
  font-size: 30px;
  line-height: 30px;
  transition: all 0.8s;
  border: 1px solid transparent;
  text-align: center;
}
input {
  width: 100%;
  height: 100%;
}
.wrap input:focus ~ .ex {
  opacity: 1;
}
.ex:hover {
  border-radius: 50%;
  background: tomato;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  <input type="text" id="this" class="signup-input text-value" name="" placeholder="e.g. [email protected]">
  <div class="ex">&times;</div>
</div>