Aprende a abrir un selector de carácter adicional al mantener presionada una tecla en el teclado (estilo Android e iOS) en el navegador.

Cómo mostrar un selector de caracteres adicional en el teclado, presiona prolongadamente en el navegador con jQuery

Con nuestros teléfonos inteligentes, podemos escribir fácilmente números y caracteres especiales con el teclado instalado por defecto. Sin embargo, con un teclado real en su computadora, deberá confiar en los símbolos impresos en las teclas y escribir combinaciones complicadas para mostrarlos. Esto no es un problema si eres un geek, pero si tu usuario no es tan amigable con la tecnología, entonces puede usar una función como el teclado móvil en el navegador:

jQuery Long Press (Character Selector on the browser)

En este artículo, aprenderás cómo implementar un selector de caracteres especial en las entradas de texto utilizando el complemento jQuery Long Press de @quentint .

1. Descarga Long Press

Long Press es un complemento de jQuery para facilitar la escritura de caracteres raros o acentuados. Lo primero que debe hacer para implementar esta función en su sitio web / aplicación web es incluir los 3 scripts requeridos:

  • jQuery: Obviamente, tendrá jQuery cargado en su documento.
  • jquery.longpress.js : el script del complemento.
  • plugins.js : métodos auxiliares necesarios para que el complemento funcione.
  • jquery.mousewheel.js  (opcional pero recomendado): Brinda soporte para desplazarse con la rueda del mouse de una tecla especial a otra.

Luego proceda a cargar los scripts en su documento usando una etiqueta de script:

<script src="jquery.js"></script>
<script src="jquery.longpress.js"></script>
<script src="jquery.mousewheel.js"></script>
<script src="plugins.js"></script>

Para obtener más información sobre esta biblioteca, visite el repositorio oficial en Github aquí  y consulte la demostración en línea aquí .

2. Agregar estilos (CSS)

Este complemento no es tan invasivo como otros, ya que requerirá que incluya solo 3 clases de CSS. Se pueden incluir en un archivo css o con una etiqueta de estilo en el documento:

Nota

Puede ver el original style.csspara ver cualquier cambio en el repositorio original.

.long-press-popup {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
	background: rgba(0, 0, 0, .8);
	padding-top: 20px;
	margin:0;
	font-size: 60px;
}
.long-press-popup li {
	display:inline-block;
	list-style: none;
	padding: 10px 34px;
	margin-right: 20px;
	margin-bottom: 20px;
	background: #000000;
	cursor:pointer;
	color: white;
	border: solid 4px black;
	border-radius: 12px;
}
.long-press-popup .selected {
	border-color: white;
	-webkit-box-shadow: 0 0 18px rgba(255, 255, 255, 0.75);
	-moz-box-shadow:    0 0 18px rgba(255, 255, 255, 0.75);
	box-shadow:         0 0 18px rgba(255, 255, 255, 0.75);
}

3. Inicializar Long Press

Como paso final, solo necesita llamar al longPressmétodo en la entrada o área de texto donde desea inicializar el complemento. De esta manera, el usuario podrá mantener presionada una tecla en el teclado y si la tecla tiene caracteres especiales disponibles, aparecerán en la pantalla como se muestra en las imágenes (o la demostración oficial ):

$(function(){
    // Seleccione el elemento e inicialice con el método longPress.
    $('#input_or_textarea').longPress();
});

Que te diviertas ❤️!


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores