Recursos de vida 

Cómo escribir una cadena de búsqueda en html. Extensiones de búsqueda para navegadores

Esta nota es una continuación del artículo anterior (traducción) “Buscar un blog usando Google AJAX Search API y jQuery”.
Después de escribirlo, pensé dónde sería mejor colocar ese formulario y una alfombra de resultados, además de una página separada. La idea no tardó en llegar: era lógico intentar una búsqueda con resultados en una ventana emergente.

En primer lugar manifestación:

Búsqueda de blogs↓

Como "base" para la búsqueda emergente, elegí un complemento de ventana modal jQuery llamado Revelar. Es ligero, sin elementos innecesarios y muy fácil de conectar.

Revelación de instalación.
Los enlaces al guión y los estilos están escritos en la sección de plantilla:
No olvides que el archivo del complemento contiene una imagen png, que debes colocar en tu álbum de imágenes y escribir la ruta a ella. revelar.css.

El siguiente paso es inicializar el complemento" Afinación" guion(ponlo ahí):

Luego determinamos contenido emergente(ponemos esto en el cuerpo del post):

Búsqueda de blogs↓

aquí pegamos todos los códigos de búsqueda del artículo “Buscar un blog usando Google AJAX Search API y jQuery”.

Según mi comentario dentro de este código, copiar y pegar toda la búsqueda de Google allí del que estamos hablando ahora. En la plantilla de estilo css tendrás que aumentar el área del cuadrado blanco.

Y el último paso eres tú mismo enlace a la ventana modal, que puede ser texto o gráfico. Código de enlace en forma de imagen (también en el cuerpo de la publicación):

Ud. Revelar, un complemento de ventana modal, hay dos tipos de animación: desvanecerse y desvanecerseAndPop, velocidad de ejecución del efecto ajustable: velocidad de animación: 300 y la posibilidad de cerrar toda la ventana haciendo clic en el fondo oscuro: cerrar clic en fondo: verdadero.

Estas configuraciones están escritas en el script de "configuración" (ver arriba):

$("#myModal").reveal(( animación: "fadeAndPop", //fade, fadeAndPop, none Animationspeed: 300, //qué tan rápido se cierran las animaciones en backgroundclick: true, //si haces clic en el fondo, ¿se cerrará el modal? descartarmodalclass: "close-reveal-modal" //la clase de un botón o elemento que cerrará un modal abierto ));

O estas opciones se pueden conectar a través de enlace a la ventana modal (ver arriba)

Debe entenderse que tal esquema con buscar en una ventana separada- pura experimentación y requiere una personalización más cuidadosa.

La barra combinada de direcciones y búsqueda le permite consultar motores de búsqueda o ingresar direcciones web para encontrar qué vas a estás buscando en la web. Opera utiliza el motor de búsqueda de Google de forma predeterminada.

Para buscar en la web:

  1. Haga clic en el Buscar o ingresar dirección campo.
  2. Escriba palabras clave para lo que desea encontrar. Por ejemplo, escriba películas.
  3. Haga clic en una de las sugerencias de búsqueda predictiva que aparecen o presione Ingresar.

Las sugerencias de búsqueda predictiva aparecen a medida que escribe. Si desea ver los resultados de otro motor de búsqueda, como Yahoo!, Amazon o Bing, haga clic en la pestaña correspondiente que aparece en la parte inferior derecha del cuadro de sugerencias de búsqueda predictiva.


Si ya conoce la ubicación de una página, escriba la dirección web directamente en la barra combinada de direcciones y búsqueda y presione Entrar para navegar a esa página. Por ejemplo, escriba www.opera.com y presione Entrar para navegar a la página de inicio del software Opera.

Motor de búsqueda predeterminado

El motor de búsqueda predeterminado de Opera es Google, pero es posible que prefieras buscar usando Ecosia, DuckDuckGo, Amazon o Wikipedia. Para cambiar el motor de búsqueda predeterminado:

  1. Ir a Ajustes.
  2. Bajo Buscador, seleccione su motor de búsqueda preferido en el menú desplegable.

Motores de búsqueda personalizados

Además de los motores de búsqueda predeterminados de Opera, puede configurar la dirección combinada y la barra de búsqueda para obtener resultados de otros motores de búsqueda. Para hacerlo:

  1. Haga clic derecho (Ctrl + clic en Mac) en la barra de búsqueda de un sitio y seleccione Crear motor de búsqueda….
  2. Asigne al motor un nombre y una palabra clave.
  3. Hacer clic DE ACUERDO.

Crear un motor de búsqueda personalizado

Para crear una búsqueda en un motor de búsqueda personalizado, escriba primero la palabra clave asignada a su motor seguida de un espacio y luego ingrese su consulta.

Puede editar palabras clave y administrar o eliminar motores de búsqueda desde la página de configuración. Para hacerlo:

  1. Ir a Ajustes.
  2. Bajo Buscador, haga clic en el Gestionar motor de búsqueda botón.

Buscar con un motor de búsqueda personalizado

Para utilizar un motor de búsqueda personalizado en su búsqueda, escriba la palabra clave seguida de un espacio antes de su consulta. Por ejemplo, Bing tiene la palabra clave "b". Para buscar con Bing, escriba "b ¿Cuál es la capital de Idaho?". Los resultados se abrirán en una página de resultados de búsqueda de Bing.

El espacio entre la palabra clave y su consulta de búsqueda es importante para seleccionar un motor de búsqueda personalizado.


Cambiar motores de búsqueda en el menú contextual de texto resaltado

Con la herramienta emergente de búsqueda de Opera, puede resaltar texto en una página web y utilizar el texto seleccionado como consulta de búsqueda. La herramienta de búsqueda emergente utiliza su motor de búsqueda predeterminado. Sin embargo, es posible que desee resultados de otro motor después de resaltar texto para una consulta de búsqueda.

Para buscar usando el menú contextual, resalte algún texto en una página web y haga clic derecho (o CTRL + clic) en la selección.

En la ventana emergente, pase el mouse sobre Buscar con, luego seleccione el motor de búsqueda que desea utilizar.


Los resultados de la búsqueda se abrirán en una nueva pestaña.

Cambiar motores de búsqueda en Búsqueda instantánea

Cómo utilizar la ventana emergente de búsqueda:

  1. Resalte texto en una página web.
  2. Aparecerá una ventana emergente encima del texto resaltado, incluidas las opciones Buscar y Copiar(y Compartir si está en una Mac). Si se resalta una moneda, unidad o zona horaria, el valor convertido aparecerá en la ventana emergente .
  3. Seleccionar Buscar para consultar su motor de búsqueda predeterminado con el texto resaltado.
  4. Seleccionar Copiar para copiar el texto resaltado a su portapapeles.
  5. Si hay un valor convertido en la ventana emergente, haga clic en el valor para copiarlo a su portapapeles.

Para desactivar la herramienta de búsqueda emergente, incluidas todas sus funciones:

  1. Ir a Ajustes.
  2. Hacer clic Avanzado en la barra lateral izquierda y haga clic en Características.
  3. Bajo Ventana emergente de búsqueda, apagar Habilite la ventana emergente de búsqueda al seleccionar texto.

25 de octubre de 2019 La publicación ha sido actualizada.

Formulario de búsqueda desplegable en el sitio.

El estilo Flat ha ganado considerable popularidad en el diseño de sitios web. Y en esta lección veremos otro elemento del sitio, que está hecho en este estilo. Este elemento es un formulario de búsqueda. Pero no uno simple, sino un formulario de búsqueda que aparece al hacer clic y “se colapsa” si no se utiliza. En cuanto al icono de búsqueda, está extraído de un archivo SVG y es escalable a diferentes resoluciones de pantalla (tanto en dispositivos móviles como en monitores grandes).

Se puede ver un ejemplo aquí:

Descargar

Formulario de búsqueda desplegable

¿Cómo utilizar?

HTML

Primero, decidamos el marcado que estará en la página HTML:

1 2 3 4 5 6 7 <div id = "sb-búsqueda" clase = "sb-búsqueda" > <formulario > <clase de entrada = marcador de posición "sb-search-input" = "¿Qué buscarán?" tipo = "texto" valor = "" nombre = "búsqueda" id = "búsqueda" > <clase de entrada = "sb-search-submit" tipo = "enviar" valor = "" > <abarcan clase = "sb-icono-búsqueda" > </formulario> </div>

No hay nada inusual en el formulario de búsqueda: un campo de texto para ingresar, un botón de búsqueda y un elemento para el icono.

CSS

Ahora agreguemos estilos para que el formulario de búsqueda se vea bien en la página.

Como aparecerá al hacer clic en él, inicialmente está oculto. Esto se hace usando la propiedad Desbordamiento y su significado oculto, por lo que todo lo que está fuera del icono queda oculto (al final solo vemos el icono, pero no el campo de texto):

.sb-search (posición: relativa; margen superior: 10 px; ancho: 0%; ancho mínimo: 60 px; altura: 60 px; flotante: derecha; desbordamiento: oculto; -webkit-transition: ancho 0,3 s; -moz- transición: ancho 0,3 s; transición: ancho 0,3 s; -webkit-backface-visibility: oculto)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 .sb-search-input (posición: absoluta; arriba: 0; derecha: 0; borde: ninguno; contorno: ninguno; fondo: #fff; ancho: 100%; alto: 60px; margen: 0; índice z: 10 relleno: 20px 65px 20px 20px; tamaño de fuente: 20px; color: #2c3e50;) entrada [tipo = "búsqueda"] .sb-search-input (-apariencia de webkit: ninguno; -webkit -border-radius: 0px ;

Determinamos el color del texto que se encuentra en el fondo de la solicitud (el texto que ingresamos al buscar):

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 .sb-search-input: :-webkit-input-placeholder ( color : #efb480 ; ) .sb-search-input :-moz-placeholder ( color : #efb480 ; ) .sb-search-input : :-moz- marcador de posición (color: #efb480;) .sb-search-input:-ms-input-placeholder (color: #efb480;)

El botón de búsqueda siempre está ubicado encima de los otros bloques y elementos de la página, por lo que lo configuramos en un valor alto. índice z:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 .sb-icon-search (color: #fff; fondo: #e67e22; índice z: 90; tamaño de fuente: 22px; familia de fuentes: "icomoon"; habla: ninguna; estilo de fuente: normal; peso de fuente : normal; variante de fuente: normal; transformación de texto: ninguna; -webkit-font-smoothing: antialiased .sb-icon-search: antes (contenido: " \e000 "; }

Además, no olvides incluir íconos especiales (SVG). Para insertar un icono en el botón de búsqueda:

1 2 3 4 5 6 7 8 9 10 @font-face (familia de fuentes: "icomoon"; src: url ( "../fonts/icomoon/icomoon.eot") ; src:url( "../fonts/icomoon/icomoon.eot?#iefix") formato ("tipo abierto integrado"), URL ( "../fonts/icomoon/icomoon.woff") formato("woff") , URL ( "../fonts/icomoon/icomoon.ttf") formato(script "truetype" ><script src = "js/uisearch.js" > <guión > nueva UISearch(document.getElementById("sb-search"));</guión>

Conclusión

Un bonito formulario de búsqueda que ocupa muy poco espacio en el sitio y aparece maravillosamente cuando haces clic en el icono de búsqueda.

Un tutorial sobre cómo crear una barra de búsqueda responsiva y optimizada para dispositivos móviles

Hoy nos gustaría mostrarte cómo crear un efecto como el de la imagen de arriba. El objetivo es mejorar la compatibilidad con dispositivos móviles y navegadores antiguos (IE 8+). Aunque a primera vista parezca algo sencillo, diré que tuvimos que utilizar varios trucos para que todo el mecanismo funcionara según lo previsto.

En general, lo que queremos conseguir desde la barra de búsqueda:

  • Inicialmente muestra solo el botón con el ícono de búsqueda.
  • Cuando haces clic en el ícono, necesitas que la barra de búsqueda se mueva hacia un lado
  • El componente debe ser flexible, en el sentido de que pueda usarse en una interfaz responsiva.
  • cuando el usuario escribe algo en una línea, es necesario que el formulario pueda enviarse presionando el botón Enter o haciendo clic en el botón buscar
  • si el campo está abierto y no se han ingresado datos en él, y presionamos el botón buscar, el campo de entrada debería cerrarse
  • También necesitamos que el campo de entrada se cierre si hacemos clic en algún lugar fuera del campo de búsqueda, sin importar si está vacío o no.
  • Si JavaScript está deshabilitado, el campo de búsqueda debería aparecer expandido.
  • Para una mejor interacción con dispositivos táctiles, también necesita agregar soporte para eventos táctiles.

Ahora que hemos decidido todo lo que debemos hacer, comencemos con el marcado.

Calificación

En el marcado utilizamos el contenedor principal, un formulario, un campo de texto y un botón de envío, así como un elemento span para el icono:

En realidad, puedes usar un pseudoelemento para un ícono, pero como no está diseñado para elementos reemplazables, que son elementos de formulario, simplemente usamos el elemento durar.

Ahora que todos los elementos están en su lugar, vamos a darles estilo.

CSS

Según nuestros requisitos, primero nos aseguraremos de tener un botón con un icono de búsqueda visible. Todo lo demás debería estar oculto. Pero pensemos también un paso más allá e imaginemos lo que sucede cuando expandimos la barra de búsqueda (con el contenedor principal). Cómo hacemos esto? Usando la propiedad desbordamiento: oculto, y cambiar el ancho del contenedor sb-search debería revelar el campo de entrada.

Primero que nada, diseñemos el contenedor sb-search. Hagámoslo flotar hacia la derecha y le damos desbordamiento: oculto. Su ancho original será de 60 píxeles, pero como queremos animar al 100% del ancho, esto causará problemas en los navegadores móviles (iOS). No les gustan las transiciones del ancho de píxeles al ancho porcentual. En este caso, simplemente no harán la transición. Entonces, en lugar de eso, establezcamos el ancho mínimo en 60 px y el ancho en 0%.

También agregaremos una transición para el ancho con la propiedad -webkit-backface-visibility: oculta, que eliminará las "colas" no deseadas en los navegadores móviles (iOS):

Sb-search (posición: relativa; margen superior: 10 px; ancho: 0%; ancho mínimo: 60 px; altura: 60 px; flotante: derecha; desbordamiento: oculto; -webkit-transition: ancho 0,3 s; -moz-transition : ancho 0,3 s; transición: ancho 0,3 s; -webkit-backface-visibility: oculto)

Todo lo que esté fuera de este rectángulo no se mostrará.

Ahora, posicionemos el campo de entrada. Usamos un ancho porcentual para que cuando expandamos el elemento principal, el campo de entrada se expanda con él. Establecer la altura, el tamaño de fuente y los márgenes correctos garantiza que el texto esté centrado (la altura de la línea no funciona como se esperaba en IE8, por lo que usamos márgenes en su lugar). El posicionamiento absoluto del campo de entrada no es necesario, pero soluciona el molesto problema de que a veces al cerrar el campo de búsqueda por un corto periodo de tiempo aparece a la derecha del botón.

Sb-search-input ( posición: absoluta; arriba: 0; derecha: 0; borde: ninguno; contorno: ninguno; fondo: #fff; ancho: 100%; alto: 60px; margen: 0; índice z: 10; relleno: 20px 65px 20px 20px; familia de fuentes: heredar; tamaño de fuente: 20px; ) input.sb-search-input ( -apariencia-webkit: ninguno; -radius-border-webkit: 0px; )

Además de esto, vamos a eliminar los estilos de campos de entrada del navegador estándar para el motor WebKit.

Configuremos los colores del texto usando propiedades específicas del navegador:

Sb-search-input::-webkit-input-placeholder ( color: #efb480; ) .sb-search-input:-moz-placeholder ( color: #efb480; ) .sb-search-input::-moz-placeholder (color: #efb480;) .sb-search-input:-ms-input-placeholder (color: #efb480;)

Ahora ocupémonos del icono de búsqueda en el botón de envío del formulario. Queremos que estén en el mismo lugar, uno debajo del otro, así que los ubicaremos con respecto a la esquina derecha y les daremos las mismas dimensiones. Como deben ubicarse uno encima del otro, los posicionamos absolutamente:

Sb-icon-search, .sb-search-submit ( ancho: 60px; alto: 60px; visualización: bloque; posición: absoluta; derecha: 0; arriba: 0; relleno: 0; margen: 0; altura de línea: 60px ; alineación de texto: centro;

En la posición inicial, queremos que se pueda hacer clic en el icono de búsqueda y, cuando expandamos el campo de búsqueda, queremos que se pueda hacer clic en el botón de envío del formulario. Entonces, inicialmente configuraremos el botón de envío del formulario en z-index=-1 y lo haremos transparente para que siempre podamos ver durar con icono de búsqueda:

Sb-search-submit ( fondo: #fff; /* para IE */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */ filtro: alpha(opacity=0) ); /* IE 5-7 */ opacidad: 0; borde: ninguno; índice z: -1;

¿Por qué no hacer que su fondo sea transparente? Sí, porque no funciona en IE, ya que no se puede hacer clic en el elemento. Entonces, usamos un fondo sólido y establecemos la opacidad del elemento en 0.

El ícono de búsqueda inicialmente tendrá un índice z alto porque queremos que aparezca encima de todo. Usando un pseudo elemento :antes para agregar un ícono de búsqueda:

Sb-icon-search ( color: #fff; fondo: #e67e22; índice z: 90; tamaño de fuente: 22px; familia de fuentes: "icomoon"; habla: ninguno; estilo de fuente: normal; peso de fuente: normal; variante de fuente: normal; transformación de texto: ninguna; -webkit-font-smoothing: antialiased; .sb-icon-search:before (contenido: "\e000";)

No olvides incluir la fuente del icono al principio de nuestro CSS:

@font-face ( familia de fuentes: "icomoon"; src:url("../fonts/icomoon/icomoon.eot"); src:url("../fonts/icomoon/icomoon.eot?#iefix" ) formato("embedded-opentype"), url("../fonts/icomoon/icomoon.woff") formato("woff"), url("../fonts/icomoon/icomoon.ttf") formato(" truetype"), url("../fonts/icomoon/icomoon.svg#icomoon") formato("svg"); peso de fuente: normal; estilo de fuente: normal; )

Con los estilos que acabamos de definir, podemos simplemente cambiar el ancho del contenedor sb-search al 100% asignando la clase sb-search-open. Sin JavaScript, el campo de búsqueda estará abierto de forma predeterminada:

Sb-search.sb-search-open, .no-js .sb-search (ancho: 100%;)

Cambiemos el color del ícono de búsqueda y colóquelo detrás del botón de envío del formulario, configurando el índice z en un valor más bajo:

Sb-search.sb-search-open .sb-icon-search, .no-js .sb-search .sb-icon-search (fondo: #da6d0d; color: #fff; índice z: 11;)

Y finalmente, démosle al botón de envío del formulario un índice z de más de alto valor para que podamos hacer clic en él:

Sb-search.sb-search-open .sb-search-submit, .no-js .sb-search .sb-search-submit ( índice z: 90; )

Entonces, se describen todos los estilos, comencemos con JavaScript.

javascript

Comencemos cambiando la clase sb-search-open. Agregaremos la clase cuando se haga clic en el contenedor principal (sb-search) y la eliminaremos cuando se haga clic en el botón de envío del formulario, pero solo si no hay nada escrito en el campo. De lo contrario, simplemente enviaremos el formulario. Para no eliminar la clase cuando hace clic en el campo de entrada (ya que nuestros activadores están configurados para todo el contenedor), debemos evitar que el evento de clic se propague en este elemento. Esto significa que cuando hace clic en el campo de entrada, no se activará el evento de clic para los elementos principales.

;(función(ventana) ( función UISearch(el, opciones) ( this.el = el; this.inputEl = el.querySelector("form > input.sb-search-input"); this._initEvents(); ) UISearch .prototype = ( _initEvents: function() ( var self = this, initSearchFn = function(ev) ( if(!classie.has(self.el, "sb-search-open")) ( // abre ev.preventDefault( ); self.open(); else if(classie.has(self.el, "sb-search-open") && /^\s*$/.test(self.inputEl.value)) ( // cerrar self.close(); ) ) this.el.addEventListener("hacer clic", initSearchFn); this.inputEl.addEventListener("hacer clic", función(ev) ( ev.stopPropagation(); )), abrir: función () ( classie.add(this.el, "sb-search-open"); ), cerrar: función() ( classie.remove(this.el, "sb-search-open"); ) ) // agregar al ventana de espacio de nombres global.UISearch = UISearch))(ventana);

A continuación, debemos agregar eventos para eliminar la clase sb-search-open si hacemos clic en algún lugar fuera de nuestra barra de búsqueda. Para que esto funcione, también debes ocuparte de la ventana emergente de eventos cuando haces clic en el contenedor principal.

;(función(ventana) ( función UISearch(el, opciones) ( this.el = el; this.inputEl = el.querySelector("form > input.sb-search-input"); this._initEvents(); ) UISearch .prototype = ( _initEvents: function() ( var self = this, initSearchFn = function(ev) ( ev.stopPropagation(); if(!classie.has(self.el, "sb-search-open")) ( / / open ev.preventDefault(); self.open(); else if(classie.has(self.el, "sb-search-open") && /^\s*$/.test(self.inputEl.value )) ( // cerrar self.close(); ) ) this.el.addEventListener("click", initSearchFn); this.inputEl.addEventListener("click", function(ev) ( ev.stopPropagation(); )) ; ), open: function() ( var self = this; classie.add(this.el, "sb-search-open"); // cierra el campo de búsqueda si hubo un clic en algún lugar fuera del contenedor var bodyFn = function ( ev) ( self.close(); this.removeEventListener("click", bodyFn); ); document.addEventListener("click", bodyFn); close: function() ( classie.remove(this.el, " sb). -search-open"); ) ) // agréguelo a la ventana del espacio de nombres global.UISearch = UISearch; ))(ventana);

Otra cosa que hay que tener en cuenta es eliminar los espacios en blanco adicionales al principio y al final de la línea.

Además, cuando hace clic en el icono de búsqueda, debe asegurarse de que el foco se mueva al campo de entrada. Dado que esto provoca una representación entrecortada en dispositivos móviles (iOS), dado que el teclado también se abre al mismo tiempo, debemos evitar de alguna manera que el teclado se abra en tales casos. Cuando cerramos el campo de búsqueda, debemos quitarle el foco. Esto resuelve problemas por los cuales algunos dispositivos aún muestran un cursor parpadeante después de cerrar el campo de búsqueda.

;(función(ventana) ( // http://stackoverflow.com/a/11381730/989439 función mobilecheck() ( var check = false; (función(a)(if(/(android|ipad|playbook|silk| bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront |opera m(ob|in)i|palm(os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(navegador |enlace)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50i|770s|802s|a wa|abac|ac (er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te| us)|attw|au(di|\-m|r |s)|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w |bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng )|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic| k0)|esl8|ez(0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od )|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp(i|ip)|hs\-c|ht(c (\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac(|\-|\/) |ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt(|\/)|klon|kpt |kwc\-| kyo(c|k)|le(no|xi)|lg(g|\/(k|l|u)|50|54|\-)|libw|lynx|m1\-w|m3ga|m50\/ |ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi| de|hacer|t(\-| |o|v)|zz)|mt(50|p1|v)|mwbp|mywa|n10|n20|n30(0|2)|n50(0|2|5)|n7(0(0|1) |10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan (a|d|t)|pdxg|pg(13|\-(|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio |pt\-g|qa\-a|qc(07|12|21|32|60|\-|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\ /|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47| mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft| ny)|sp(01|h\-|v\-|v)|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\ -|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\ .b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5|\-v)|vm40|voda|vulc|vx(52|53|60|61| 70|80|81|83|85|98)|w3c(\-|)|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|tu|zeto|zte\- /i.test(a.substr(0,4)))check = true))(navigator.userAgent||navigator.vendor||window.opera); cheque devuelto; ) // http://www.jonathantneal.com/blog/polyfills-and-prototypes/ !String.prototype.trim && (String.prototype.trim = function() ( return this.replace(/^\s+|\ s+$/g, ""); función UISearch(el, opciones) ( this.el = el; this.inputEl = el.querySelector("form > input.sb-search-input"); this._initEvents(); ) UISearch.prototype = ( _initEvents: función () ( var self = this, initSearchFn = function(ev) ( ev.stopPropagation(); // elimina espacios en blanco adicionales self.inputEl.value = self.inputEl.value.trim(); if(!classie.has( self .el, "sb-search-open")) ( // abre ev.preventDefault(); self.open(); ) else if(classie.has(self.el, "sb-search-open") && / ^\s*$/.test(self.inputEl.value)) ( // cerrar self.close(); ) ) this.el.addEventListener("hacer clic", initSearchFn); ", función(ev) ( ev.stopPropagation(); )); ), abrir: función() ( var self = this; classie.add(this.el, "sb-search-open"); // mover el foco en el campo de entrada if(!mobilecheck()) ( this.inputEl.focus(); ) // cierra el campo de búsqueda si hubo un clic en algún lugar fuera del contenedor var bodyFn = function(ev) ( self.close(); esto. removeEventListener("clic", bodyFn); ); document.addEventListener("clic", bodyFn); ), cerrar: function() ( this.inputEl.blur(); classie.remove(this.el, "sb-search-open"); ) ) // agregar a la ventana del espacio de nombres global. UIBuscar = UIBuscar; ))(ventana);

Para que todo esto funcione sin problemas en dispositivos móviles, debe configurar los eventos táctiles adecuados. Añadiendo prevenir valor predeterminado en una función initBuscarFn evitará la activación simultánea de eventos de toque y clic en la pantalla para dispositivos móviles.

;(función(ventana) ( // http://stackoverflow.com/a/11381730/989439 función mobilecheck() ( var check = false; (función(a)(if(/(android|ipad|playbook|silk| bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront |opera m(ob|in)i|palm(os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(navegador |enlace)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50i|770s|802s|a wa|abac|ac (er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te| us)|attw|au(di|\-m|r |s)|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w |bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng )|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic| k0)|esl8|ez(0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od )|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp(i|ip)|hs\-c|ht(c (\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac(|\-|\/) |ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt(|\/)|klon|kpt |kwc\-| kyo(c|k)|le(no|xi)|lg(g|\/(k|l|u)|50|54|\-)|libw|lynx|m1\-w|m3ga|m50\/ |ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi| de|hacer|t(\-| |o|v)|zz)|mt(50|p1|v)|mwbp|mywa|n10|n20|n30(0|2)|n50(0|2|5)|n7(0(0|1) |10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan (a|d|t)|pdxg|pg(13|\-(|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio |pt\-g|qa\-a|qc(07|12|21|32|60|\-|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\ /|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47| mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft| ny)|sp(01|h\-|v\-|v)|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\ -|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\ .b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5|\-v)|vm40|voda|vulc|vx(52|53|60|61| 70|80|81|83|85|98)|w3c(\-|)|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|tu|zeto|zte\- /i.test(a.substr(0,4)))check = true))(navigator.userAgent||navigator.vendor||window.opera); cheque devuelto; ) // http://www.jonathantneal.com/blog/polyfills-and-prototypes/ !String.prototype.trim && (String.prototype.trim = function() ( return this.replace(/^\s+|\ s+$/g, ""); función UISearch(el, opciones) ( this.el = el; this.inputEl = el.querySelector("form > input.sb-search-input"); this._initEvents(); ) UISearch.prototype = ( _initEvents: función () ( var self = this, initSearchFn = function(ev) ( ev.stopPropagation(); // elimina espacios en blanco adicionales self.inputEl.value = self.inputEl.value.trim(); if(!classie.has( self .el, "sb-search-open")) ( // abre ev.preventDefault(); self.open(); ) else if(classie.has(self.el, "sb-search-open") && / ^\s*$/.test(self.inputEl.value)) ( // cerrar ev.preventDefault(); self.close(); ) ) this.el.addEventListener("click", initSearchFn); ("touchstart", initSearchFn); this.inputEl.addEventListener("click", función(ev) ( ev.stopPropagation(); )); (); )), open: function() ( var self = this; classie.add(this.el, "sb-search-open"); // mueve el foco al campo de entrada if(!mobilecheck ()) ( this.inputEl.focus(); ) // cierra el campo de búsqueda si hubo un clic en algún lugar fuera del contenedor var bodyFn = function(ev) ( self.close(); this.removeEventListener("click", bodyFn); this.removeEventListener("touchstart", bodyFn ); document.addEventListener("clic", bodyFn); document.addEventListener("touchstart", bodyFn); ), cerrar: function() ( this.inputEl.blur(); classie.remove(this.el, "sb-search-open"); ) ) // agregar a la ventana del espacio de nombres global. UIBuscar = UIBuscar; ))(ventana);

Y finalmente, para los navegadores que no soportan agregarEventListener Y eliminarEventListener, usaremos EventListener de Jonathan Neal.

//Escucha de eventos | @jon_neal | //github.com/jonathantneal/EventListener !window.addEventListener && window.Element && (función () ( función addToPrototype(nombre, método) ( Window.prototype = HTMLDocument.prototype = Element.prototype = método; ) var registro = ; addToPrototype("addEventListener", función (tipo, oyente) ( var target = this; registro.unshift(( __listener: función (evento) ( event.currentTarget = target; event.pageX = event.clientX + document.documentElement.scrollLeft; event.pageY = event.clientY + document.documentElement.scrollTop; event.preventDefault = function() (event. relatedTarget = event.fromElement || null; event.stopPropagation = function() (event. cancelBubble = true); evento. relatedTarget = event.fromElement || null; event.srcElement || destino; listener.call(destino, evento); destino, tipo: this.attachEvent("on" + tipo, registro.__escucha)) ; addToPrototype("removeEventListener", función (tipo, oyente) (para (var índice = 0, longitud = registro.longitud; índice< length; ++index) { if (registry.target == this && registry.type == type && registry.listener == listener) { return this.detachEvent("on" + type, registry.splice(index, 1).__listener); } } }); addToPrototype("dispatchEvent", function (eventObject) { try { return this.fireEvent("on" + eventObject.type, eventObject); } catch (error) { for (var index = 0, length = registry.length; index < length; ++index) { if (registry.target == this && registry.type == eventObject.type) { registry.call(this, eventObject); } } } }); })();

¡Y aquí está! ¡Espero que hayas disfrutado de esta guía y hayas aprendido algo útil de ella!

En este tutorial, crearemos un formulario de búsqueda desplegable que encajará perfectamente en el diseño de la interfaz para dispositivos móviles. Solo se utilizará CSS para implementar el elemento, sin JavaScript ni marcas adicionales. Simple y método efectivo para implementar un formulario de búsqueda compacto.

Objetivo

En los dispositivos móviles, se cuenta cada píxel. Para minimizar el espacio requerido para mostrar el formulario, inicialmente se mostrará en forma compacta y se expandirá cuando reciba el foco de entrada (:focus). Este enfoque le permite ahorrar espacio para otros elementos y contenidos de la interfaz.

marcado HTML

El formulario utiliza HTML5. El código es muy simple:

Restablecer la vista del formulario de búsqueda predeterminada en los navegadores Webkit

De forma predeterminada, en los navegadores Webkit el formulario de búsqueda se verá así:

Para que el formulario de búsqueda parezca un campo de entrada de texto normal, debe agregar los siguientes estilos:

Entrada ( -webkit-apariencia: campo de texto; -webkit-box-sizing: contenido-cuadro; familia de fuentes: heredar; tamaño de fuente: 100%; ) entrada::-webkit-búsqueda-decoración, entrada::-webkit- botón de cancelación de búsqueda (pantalla: ninguno;)

Formando nuestro formulario de búsqueda

El campo de entrada tendrá un ancho normal de 55 px y se expandirá a 130 px en el estado: foco. La propiedad de transición se usa para la animación y la sombra de cuadro se usa para el efecto de brillo.

Entrada (fondo: #ededed url(img/search-icon.png) centro de 9px sin repetición; borde: sólido 1px #ccc; relleno: 9px 10px 9px 32px; ancho: 55px; /* Ancho predeterminado */ -webkit- borde -radius: 10em; -moz-border-radius: 10em; -webkit-transition: todos .5s; ancho: 130px; /* Ancho cuando la entrada está enfocada */ background-color: #fff; -webkit-box-shadow: 0 0 5px rgba(109,207,246,.5); sombra: 0 0 5px rgba(109,207,246,.5); box-shadow: 0 0 5px rgba(109,207,246,.5); */ )

Ejemplo B

En el ejemplo B, el formulario de búsqueda se minimiza significativamente: solo se muestra el icono sin ningún texto de relleno. Observe que las propiedades de relleno y ancho del campo de búsqueda han cambiado para formar un botón circular. Para hacer que el texto sea invisible, use la propiedad color:transparente.

#demo-b entrada (ancho: 15px; relleno-izquierda: 10px; color: transparente; cursor: puntero;) #demo-b entrada:hover (fondo-color: #fff;) #demo-b entrada:enfoque (ancho : 130px; relleno-izquierda: 32px; color de fondo: #fff;

Compatibilidad del navegador

El método descrito funciona en todos los navegadores principales: Chrome, Firefox, Safari e IE8+. En IE7 y navegadores más antiguos, la funcionalidad no funciona debido a la falta de soporte para la pseudoclase:focus y el tipo de campo de búsqueda.