¿Cómo pongo un botón claro dentro de mi cuadro de entrada de texto HTML como lo hace el iPhone?

131

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.

javascript iphone html css Hugh Buchanan
fuente

Respuestas:

93

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

Ejemplo en vivo aquí .

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.

BalusC
fuente
77
¿Es posible hacer que el botón Borrar esté oculto cuando el campo de texto está vacío?
root
En IE9 el texto flota bajo el ícono de la cruz.
sedovav
desde el cambio de tema, la url de la imagen ya no es correcta. Se puede acceder a la imagen anterior en web.archive.org/web/20150101025546/http://cdn.sstatic.net/…
zacaj
1
También puede utilizar los iconos de fuente-impresionante con class="fa fa-remove"el lapso de interior para mostrar un bonito icono de la cruz
singe3
Usé la versión pura de Javascript y funcionó bien, excepto por centrar el botón en Win / Linux Firefox / Chrome. Lo resolví eliminando top:el lapso secundario y estableciendo display: flex; align-items: center;el lapso primario.
thomasa88
157

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.

campo de entrada de búsqueda HTML5 simple

(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;
}

campo de entrada de búsqueda de bootstrap

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

Nick Sweeting
fuente
3
Excelente respuesta, sin código involucrado. Por desgracia no es compatible con muchos navegadores .. No importa, sería una característica adicional de Chrome en mi producto :)
guillaumepotier
49

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 .

ThorSummoner
fuente
44
Aunque el tipo de 'búsqueda' es compatible con todos los navegadores recientes (consulte el soporte aquí: wufoo.com/html5), el botón de borrar no se muestra en Firefox (32.0.3) u Opera (12.17).
justanotherprogrammer
9
el botón de borrar tampoco se muestra en el último Chrome
tsayen
3
Si está utilizando Bootstrap, puede anular el comportamiento predeterminado
aexl
Al CodePen vinculado le falta la barra diagonal de cierre en la entrada, por lo que si desea verlo funcionar en CodePen, simplemente agregue la barra diagonal de cierre.
Gen1-1
@ Gen1-1 Uy, parece que las subidas públicas están desactivados blog.codepen.io/2019/08/06/anonymous-pen-save-option-removed si alguien ha una pluma código fijo, no dude en editar y ayudar a corregir la demo
ThorSummoner
24

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/

wldaunfr
fuente
Esto es increíble, pero recomendaría agregar "$ (window) .resize (function () {triggerBtn ()});" en jquery.clearsearch.js, justo después de $ this.on ('keyup keydown change focus', triggerBtn); El | Para que el cambio de tamaño de las ventanas no arruine la posición cruzada
Ng Sek Long
17

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;)

Tom
fuente
6

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>
Expandir fragmento

https://jsfiddle.net/qdesign/xn9eogmx/1/

Mahmoud Ali Kassem
fuente
3

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>
Expandir fragmento

TechNyquist
fuente
1

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>
Expandir fragmento

Mehran Shagerdi
fuente
Si bien este código puede proporcionar una solución al problema de OP, se recomienda encarecidamente que proporcione un contexto adicional sobre por qué y / o cómo este código responde a la pregunta. Las respuestas de código solo generalmente se vuelven inútiles a largo plazo porque los futuros espectadores que experimentan problemas similares no pueden entender el razonamiento detrás de la solución.
E. Zeytinci
-1

@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>
Expandir fragmento

Hiren
fuente