javascript - limpiar - Borrar icono dentro de texto de entrada
clear button on input (14)
¿¿Algo como esto?? Demostración Jsfiddle
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.searchinput{
display:inline-block;vertical-align: bottom;
width:30%;padding: 5px;padding-right:27px;border:1px solid #ccc;
outline: none;
}
.clearspace{width: 20px;display: inline-block;margin-left:-25px;
}
.clear {
width: 20px;
transition: max-width 0.3s;overflow: hidden;float: right;
display: block;max-width: 0px;
}
.show {
cursor: pointer;width: 20px;max-width:20px;
}
form{white-space: nowrap;}
</style>
</head>
<body>
<form>
<input type="text" class="searchinput">
</form>
<script src="jquery-1.11.3.min.js" type="text/javascript"></script> <script>
$(document).ready(function() {
$("input.searchinput").after(''<span class="clearspace"><i class="clear" title="clear">✗</i></span>'');
$("input.searchinput").on(''keyup input'',function(){
if ($(this).val()) {$(".clear").addClass("show");} else {$(".clear").removeClass("show");}
});
$(''.clear'').click(function(){
$(''input.searchinput'').val('''').focus();
$(".clear").removeClass("show");
});
});
</script>
</body>
</html>
Me pregunto si existe una forma rápida de crear un elemento de texto de entrada con un icono a la derecha para borrar el elemento de entrada en sí (como el cuadro de búsqueda de Google).
Miré a mi alrededor, pero solo encontré cómo poner un ícono como fondo del elemento de entrada.
¿Hay un plugin jQuery u otra cosa?
Gracias
EDITAR: Quiero el icono dentro del elemento de texto de entrada
algo como:
--------------------------------------------------
| X|
--------------------------------------------------
¿Podría sugerirle que, si está de acuerdo con que esto se limite a los navegadores compatibles con html 5, simplemente use:
<input type="search" />
Es cierto que en Chromium (Ubuntu 11.04), esto requiere que haya texto dentro del elemento de input antes de que aparezca la imagen / funcionalidad de texto claro.
Referencia:
Agregue un type="search" a su entrada
El soporte es bastante bueno, pero no funcionará en IE <10
<input type="search">
Entrada que se puede borrar para navegadores antiguos
Si necesita soporte de IE9 aquí hay algunas soluciones
Usando un estándar <input type="text"> y algunos elementos HTML:
/**
* Clearable text inputs
*/
$(".clearable").each(function() {
var $inp = $(this).find("input:text"),
$cle = $(this).find(".clearable__clear");
$inp.on("input", function(){
$cle.toggle(!!this.value);
});
$cle.on("touchstart click", function(e) {
e.preventDefault();
$inp.val("").trigger("input");
});
});
/* Clearable text inputs */
.clearable{
position: relative;
display: inline-block;
}
.clearable input[type=text]{
padding-right: 24px;
width: 100%;
box-sizing: border-box;
}
.clearable__clear{
display: none;
position: absolute;
right:0; top:0;
padding: 0 8px;
font-style: normal;
font-size: 1.2em;
user-select: none;
cursor: pointer;
}
.clearable input::-ms-clear { /* Remove IE default X */
display: none;
}
<span class="clearable">
<input type="text" name="" value="" placeholder="">
<i class="clearable__clear">×</i>
</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Usando solo una <input class="clearable" type="text"> (Sin elementos adicionales)
establece una class="clearable" y juega con su imagen de fondo:
/**
* Clearable text inputs
*/
function tog(v){return v?''addClass'':''removeClass'';}
$(document).on(''input'', ''.clearable'', function(){
$(this)[tog(this.value)](''x'');
}).on(''mousemove'', ''.x'', function( e ){
$(this)[tog(this.offsetWidth-18 < e.clientX-this.getBoundingClientRect().left)](''onX'');
}).on(''touchstart click'', ''.onX'', function( ev ){
ev.preventDefault();
$(this).removeClass(''x onX'').val('''').change();
});
// $(''.clearable'').trigger("input");
// Uncomment the line above if you pre-fill values from LS or server
/* Clearable text inputs */
.clearable{
background: #fff url(http://i.stack.imgur.com/mJotv.gif) no-repeat right -10px center;
border: 1px solid #999;
padding: 3px 18px 3px 4px; /* Use the same right padding (18) in jQ! */
border-radius: 3px;
transition: background 0.4s;
}
.clearable.x { background-position: right 5px center; } /* (jQ) Show icon */
.clearable.onX{ cursor: pointer; } /* (jQ) hover cursor style */
.clearable::-ms-clear {display: none; width:0; height:0;} /* Remove IE default X */
<input class="clearable" type="text" name="" value="" placeholder="" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
El truco es establecer un relleno correcto (utilicé 18px) en la input y empujar la imagen de fondo hacia la derecha, fuera de la vista ( right -10px center ).
Ese relleno de 18 píxeles evitará que el texto se oculte debajo del icono (mientras esté visible).
jQ agregará la clase x (si la input tiene valor) mostrando el ícono de borrar.
Ahora todo lo que necesitamos es apuntar con jQ las entradas con clase x y detectar en mousemove si el mouse está dentro de ese área de 18px "x"; si está adentro, agregue la clase onX .
Al hacer clic en la clase onX , se eliminan todas las clases, se restablece el valor de entrada y se oculta el ícono.
7x7px gif:
Cadena Base64:
data:image/gif;base64,R0lGODlhBwAHAIAAAP///5KSkiH5BAAAAAAALAAAAAAHAAcAAAIMTICmsGrIXnLxuDMLADs=
Aquí hay un plugin de jQuery (y una demostración al final).
Lo hice principalmente para ilustrar un ejemplo (y un desafío personal). Aunque los votos favorables son bienvenidos, las otras respuestas se entregan a tiempo y merecen su debido reconocimiento.
Aún así, en mi opinión, es un exceso de ingeniería (a menos que forme parte de una biblioteca de UI).
Creé un cuadro de texto eliminable solo en CSS. No requiere código javascript para que funcione
a continuación está el enlace de demostración
Debido a que ninguna de las soluciones que volaban realmente cumplía con nuestros requisitos, se nos ocurrió un plugin jQuery simple llamado jQuery-ClearSearch -
usarlo es tan fácil como:
<input class="clearable" type="text" placeholder="search">
<script type="text/javascript">
$(''.clearable'').clearSearch();
</script>
Ejemplo: http://jsfiddle.net/wldaunfr/FERw3/
He escrito un componente simple usando jQuery y bootstrap. Pruébalo: https://github.com/mahpour/bootstrap-input-clear-button
No es necesario incluir CSS o archivos de imagen. No es necesario incluir toda la biblioteca de jQuery UI de artillería pesada. Escribí un plugin JQuery ligero que hace la magia por ti. Todo lo que necesitas es jQuery y el complemento . =)
Fiddle aquí: demostración de jQuery InputSearch .
Podría usar un botón de reinicio diseñado con una imagen ...
<form action="" method="get">
<input type="text" name="search" required="required" placeholder="type here" />
<input type="reset" value="" alt="clear" />
</form>
<style>
input[type="text"]
{
height: 38px;
font-size: 15pt;
}
input[type="text"]:invalid + input[type="reset"]{
display: none;
}
input[type="reset"]
{
background-image: url( http://png-5.findicons.com/files/icons/1150/tango/32/edit_clear.png );
background-position: center center;
background-repeat: no-repeat;
height: 38px;
width: 38px;
border: none;
background-color: transparent;
cursor: pointer;
position: relative;
top: -9px;
left: -44px;
}
</style>
Véalo en acción aquí: http://jsbin.com/uloli3/63
Si lo quiere como Google, entonces debe saber que la "X" no está realmente dentro de la <input> : están uno al lado del otro con el contenedor externo diseñado para que aparezca como el cuadro de texto.
HTML:
<form>
<span class="x-input">
<input type="text" class="x-input-text" />
<input type="reset" />
</span>
</form>
CSS:
.x-input {
border: 1px solid #ccc;
}
.x-input input.x-input-text {
border: 0;
outline: 0;
}
Ejemplo: http://jsfiddle.net/VTvNX/
Usando un plugin jquery lo he adaptado a mis necesidades agregando opciones personalizadas y creando un nuevo plugin. Puede encontrarlo aquí: https://github.com/david-dlc-cerezo/jquery-clearField
Un ejemplo de uso simple:
<script src=''http://code.jquery.com/jquery-1.9.1.js''></script>
<script src=''http://code.jquery.com/ui/1.10.3/jquery-ui.js''></script>
<script src=''src/jquery.clearField.js''></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="css/jquery.clearField.css">
<table>
<tr>
<td><input name="test1" id="test1" clas="test" type=''text''></td>
<td>Empty</td>
</tr>
<tr>
<td><input name="test2" id="test2" clas="test" type=''text'' value=''abc''></td>
<td>Not empty</td>
</tr>
</table>
<script>
$(''.test'').clearField();
</script>
Obteniendo algo como esto:
jQuery Mobile ahora tiene esto integrado:
<input type="text" name="clear" id="clear-demo" value="" data-clear-btn="true">
De acuerdo con MDN , <input type="search" /> es actualmente compatible con todos los navegadores modernos:
<input type="search" value="Clear this." />
Sin embargo, si desea un comportamiento diferente que sea coherente en todos los navegadores, hay algunas alternativas ligeras que solo requieren JavaScript:
Opción 1: siempre muestra la ''x'': (ejemplo aquí)
Array.prototype.forEach.call(document.querySelectorAll(''.clearable-input>[data-clear-input]''), function(el) {
el.addEventListener(''click'', function(e) {
e.target.previousElementSibling.value = '''';
});
});
.clearable-input {
position: relative;
display: inline-block;
}
.clearable-input > input {
padding-right: 1.4em;
}
.clearable-input > [data-clear-input] {
position: absolute;
top: 0;
right: 0;
font-weight: bold;
font-size: 1.4em;
padding: 0 0.2em;
line-height: 1em;
cursor: pointer;
}
.clearable-input > input::-ms-clear {
display: none;
}
<p>Always display the ''x'':</p>
<div class="clearable-input">
<input type="text" />
<span data-clear-input>×</span>
</div>
<div class="clearable-input">
<input type="text" value="Clear this." />
<span data-clear-input>×</span>
</div>
Opción 2: solo muestra la ''x'' al pasar el cursor sobre el campo: (ejemplo aquí)
Array.prototype.forEach.call(document.querySelectorAll(''.clearable-input>[data-clear-input]''), function(el) {
el.addEventListener(''click'', function(e) {
e.target.previousElementSibling.value = '''';
});
});
.clearable-input {
position: relative;
display: inline-block;
}
.clearable-input > input {
padding-right: 1.4em;
}
.clearable-input:hover > [data-clear-input] {
display: block;
}
.clearable-input > [data-clear-input] {
display: none;
position: absolute;
top: 0;
right: 0;
font-weight: bold;
font-size: 1.4em;
padding: 0 0.2em;
line-height: 1em;
cursor: pointer;
}
.clearable-input > input::-ms-clear {
display: none;
}
<p>Only display the ''x'' when hovering over the field:</p>
<div class="clearable-input">
<input type="text" />
<span data-clear-input>×</span>
</div>
<div class="clearable-input">
<input type="text" value="Clear this." />
<span data-clear-input>×</span>
</div>
Opción 3: solo muestra la ''x'' si el elemento de input tiene un valor: (ejemplo aquí)
Array.prototype.forEach.call(document.querySelectorAll(''.clearable-input''), function(el) {
var input = el.querySelector(''input'');
conditionallyHideClearIcon();
input.addEventListener(''input'', conditionallyHideClearIcon);
el.querySelector(''[data-clear-input]'').addEventListener(''click'', function(e) {
input.value = '''';
conditionallyHideClearIcon();
});
function conditionallyHideClearIcon(e) {
var target = (e && e.target) || input;
target.nextElementSibling.style.display = target.value ? ''block'' : ''none'';
}
});
.clearable-input {
position: relative;
display: inline-block;
}
.clearable-input > input {
padding-right: 1.4em;
}
.clearable-input >[data-clear-input] {
display: none;
position: absolute;
top: 0;
right: 0;
font-weight: bold;
font-size: 1.4em;
padding: 0 0.2em;
line-height: 1em;
cursor: pointer;
}
.clearable-input > input::-ms-clear {
display: none;
}
<p>Only display the ''x'' if the `input` element has a value:</p>
<div class="clearable-input">
<input type="text" />
<span data-clear-input>×</span>
</div>
<div class="clearable-input">
<input type="text" value="Clear this." />
<span data-clear-input>×</span>
</div>
EDIT: encontré este enlace. Espero eso ayude. http://viralpatel.net/blogs/2011/02/clearable-textbox-jquery.html
Usted ha mencionado que lo quiere a la derecha del texto de entrada. Entonces, la mejor manera sería crear una imagen al lado del cuadro de entrada. Si está buscando algo dentro de la caja, puede usar la imagen de fondo pero es posible que no pueda escribir una secuencia de comandos para borrar la caja.
Por lo tanto, inserte una imagen y escriba un código JavaScript para borrar el cuadro de texto.