Quiero tener un pequeño icono agradable que, al hacer clic, borre el texto en el cuadro <ENTRADA>.
Esto es para ahorrar espacio en lugar de tener un enlace claro fuera del cuadro de entrada.
Mis habilidades de CSS son débiles ... Aquí hay una captura de pantalla de cómo se ve el iPhone.
Respuestas:
@thebluefox ha resumido lo mejor de todo. De todos modos, solo está obligado a usar JavaScript para que ese botón funcione. Aquí hay un SSCCE, puedes copiarlo y pegarlo y ejecutarlo:
<!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>Por cierto, jQuery no es necesario, simplemente separa muy bien la lógica necesaria para la mejora progresiva de la fuente, por supuesto, también puede continuar con HTML / CSS / JS simple :
<!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>Solo termina con HTML más feo (y JS no compatible con crossbrowser;)).
Tenga en cuenta que cuando la apariencia de la interfaz de usuario no es su mayor preocupación, pero la funcionalidad lo es, simplemente use en <input type="search">lugar de <input type="text">. Mostrará el botón de borrar (específico del navegador) en navegadores compatibles con HTML5.
class="fa fa-remove"el lapso de interior para mostrar un bonito icono de la cruz
top:el lapso secundario y estableciendo display: flex; align-items: center;el lapso primario.
Hoy en día con HTML5, es bastante simple:
<input type="search" placeholder="Search..."/>La mayoría de los navegadores modernos mostrarán automáticamente un botón transparente utilizable en el campo de forma predeterminada.
(Si usa Bootstrap, deberá agregar una anulación a su archivo CSS para que se muestre)
input[type=search]::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button;
}
Los navegadores Safari / WebKit también pueden proporcionar funciones adicionales cuando se usan type="search", comoresults=5 y autosave="...", pero también anulan muchos de sus estilos (por ejemplo, altura, bordes). Para evitar esas anulaciones, mientras conserva la funcionalidad como el botón X, puede agregar esto a su CSS:
input[type=search] {
-webkit-appearance: none;
}Visite css-tricks.com para obtener más información sobre las funciones proporcionadas por type="search".
HTML5 introduce el tipo de entrada de 'búsqueda' que creo que hace lo que quieres.
<input type="search" />
Aquí hay un ejemplo en vivo .
Consulte nuestro complemento jQuery-ClearSearch . Es un complemento de jQuery configurable: adaptarlo a sus necesidades al diseñar el campo de entrada es sencillo. Solo úsalo de la siguiente manera:
<input class="clearable" type="text" placeholder="search">
<script type="text/javascript">
$('.clearable').clearSearch();
</script>Ejemplo: http://jsfiddle.net/wldaunfr/FERw3/
Desafortunadamente, no puede ponerlo dentro del cuadro de texto, solo hacer que parezca que está dentro de él, lo que desafortunadamente significa que se necesita algo de CSS: P
La teoría es envolver la entrada en un div, quitar todos los bordes y fondos de la entrada, luego estilizar el div para que se vea como el cuadro. Luego, suelte el botón después del cuadro de entrada en el código y los trabajos son buenos.
Una vez que lo tienes para trabajar de todos modos;)
Tengo una solución creativa que creo que estás buscando
$('#clear').click(function() {
$('#input-outer input').val('');
});body {
font-family: "Tahoma";
}
#input-outer {
height: 2em;
width: 15em;
border: 1px #e7e7e7 solid;
border-radius: 20px;
}
#input-outer input {
height: 2em;
width: 80%;
border: 0px;
outline: none;
margin: 0 0 0 10px;
border-radius: 20px;
color: #666;
}
#clear {
position: relative;
float: right;
height: 20px;
width: 20px;
top: 5px;
right: 5px;
border-radius: 20px;
background: #f1f1f1;
color: white;
font-weight: bold;
text-align: center;
cursor: pointer;
}
#clear:hover {
background: #ccc;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input-outer">
<input type="text">
<div id="clear">
X
</div>
</div>Por supuesto, el mejor enfoque es utilizar el cada vez más compatible <input type="search" /> .
De todos modos, para un poco de diversión de codificación, pensé que podría lograrse también usando el botón de reinicio del formulario, y este es el resultado de trabajo (vale la pena señalar que no puede vivir otras entradas, pero el campo de búsqueda con este enfoque, o el botón de reinicio se borrará) ellos también), no se necesita JavaScript:
form > div{
position: relative;
width: 200px;
}
form [type="text"] {
width: 100%;
padding-right: 20px;
}
form [type="reset"] {
position: absolute;
border: none;
display: block;
width: 16px;
border-radius: 20px;
top: 2px;
bottom: 2px;
right: -20px;
background-color: #ddd;
padding: 0px;
margin: 0px;
}<form>
<div>
<input type="text" />
<input type="reset" value="X" />
</div>
</form>Quizás esta solución simple pueda ayudar:
<input type="text" id="myInput" value="No War"/><button onclick="document.getElementById('myInput').value = ''" title="Clear">X</button></input>@Mahmoud Ali Kaseem
Acabo de cambiar algo de CSS para que se vea diferente y agregué focus ();
https://jsfiddle.net/xn9eogmx/81/
$('#clear').click(function() {
$('#input-outer input').val('');
$('#input-outer input').focus();
});body {
font-family: "Arial";
font-size: 14px;
}
#input-outer {
height: 2em;
width: 15em;
border: 1px #777 solid;
position: relative;
padding: 0px;
border-radius: 4px;
}
#input-outer input {
height: 100%;
width: 100%;
border: 0px;
outline: none;
margin: 0 0 0 0px;
color: #666;
box-sizing: border-box;
padding: 5px;
padding-right: 35px;
border-radius: 4px;
}
#clear {
position: absolute;
float: right;
height: 2em;
width: 2em;
top: 0px;
right: 0px;
background: #aaa;
color: white;
text-align: center;
cursor: pointer;
border-radius: 0px 4px 4px 0px;
}
#clear:after {
content: "\274c";
position: absolute;
top: 4px;
right: 7px;
}
#clear:hover,
#clear:focus {
background: #888;
}
#clear:active {
background: #666;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input-outer">
<input type="text">
<div id="clear"></div>
</div>