El botón de respuesta dentro de un campo de entrada borrará el área de texto en el evento de clic. En este artículo, discutiremos cómo colocar un botón de borrado receptivo dentro de un campo de entrada HTML usando HTML, CSS y JavaScript. Para poner el botón dentro del campo de entrada, usaremos CSS. Veamos primero el HTML.
Crear estructura: En esta sección, crearemos la estructura básica para el campo de entrada.
- Código HTML: al usar HTML, colocaremos el campo de entrada donde agregaremos un botón de respuesta para borrar el campo. Creamos un campo de texto y un botón y los colocamos dentro de la misma división . Para ajustar el botón en el campo de texto de entrada, se requiere el siguiente css.
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive clear field button</title> </head> <body> <h1>GeeksoforGeeks</h1> <b>Responsive clear field button</b> <br><br> <div class="buttonIn"> <input type="text" id="enter"> <button id="clear">clear</button> </div> </body> </html>
Estructura de diseño: en esta sección, diseñaremos la estructura para que sea atractiva o significativa.
- Código CSS: establezca el atributo de posición de la división principal en relativo . Establezca la posición del botón como absoluta dentro de la división. Las dos acciones anteriores nos permiten cambiar el botón a la posición superior derecha del div, lo que movería el botón dentro del campo de entrada y lo colocaría en el extremo derecho. Para hacer esto, configuramos los márgenes superior y derecho en 0px, sin embargo, este valor puede variar según el requisito de diseño. Ponemos un índice Z mayor que uno para colocar el botón en la capa sobre el campo de entrada.
CSS
<style>
h1 {
color: green;
}
.buttonIn {
width: 300px;
position: relative;
}
input {
margin: 0px;
padding: 0px;
width: 100%;
outline: none;
height: 30px;
border-radius: 5px;
}
button {
position: absolute;
top: 0;
border-radius: 5px;
right: 0px;
z-index: 2;
border: none;
top: 2px;
height: 30px;
cursor: pointer;
color: white;
background-color: #1e90ff;
transform: translateX(2px);
}
</style>
Estructura receptiva: en esta sección, podemos usar cualquiera de las secciones de código a continuación para que sea receptiva mediante el uso de JavaScript estándar o también podemos usar jQuery para eso. En los dos métodos siguientes, el enfoque básico es el mismo. Escuchamos el evento de clic en el botón y, una vez que se activa, establecemos el valor del campo de entrada en una string nula.
- Código JavaScript: el código JavaScript para hacer que el botón claro responda.
javascript
<script>
window.addEventListener('load', () => {
const button = document.querySelector('#clear');
button.addEventListener('click', () => {
document.querySelector('#enter').value = "";
});
});
</script>
- Código jQuery:
JQuery
$(document).ready(()=>
{
alert("nigge")
$('#clear').on('click', () =>
{
$('#enter').val("");
})
});
Solución final: en esta sección, combinaremos todas las secciones juntas, pero debe usar enlaces CDN si desea lograr la tarea usando la sección jQuery.
- Enlace CDN jQuery:
<guión src=”https://code.jquery.com/jquery-3.4.1.min.js” integridad=”sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=” crossorigin=”anónimo”></script>
- Programa:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Responsive clear field button</title>
<style>
h1 {
color: green;
}
.buttonIn {
width: 300px;
position: relative;
}
input {
margin: 0px;
padding: 0px;
width: 100%;
outline: none;
height: 30px;
border-radius: 5px;
}
button {
position: absolute;
top: 0;
border-radius: 5px;
right: 0px;
z-index: 2;
border: none;
top: 2px;
height: 30px;
cursor: pointer;
color: white;
background-color: #1e90ff;
transform: translateX(2px);
}
</style>
</head>
<body>
<center>
<h1>GeeksoforGeeks</h1>
<b>Responsive clear field button</b>
<br>
<br>
<div class="buttonIn">
<input type="text" id="enter">
<button id="clear">clear</button>
</div>
<center>
<script>
window.addEventListener('load', () => {
const button = document.querySelector('#clear');
button.addEventListener('click', () => {
document.querySelector('#enter').value = "";
});
});
</script>
</body>
</html>
- Producción:
HTML y CSS son la base de las páginas web. HTML se usa para el desarrollo de páginas web al estructurar sitios web, aplicaciones web y CSS se usa para diseñar sitios web y aplicaciones web. jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» . Puede obtener más información sobre HTML, CSS y jQuery en los enlaces que figuran a continuación:
- Tutorial de HTML y ejemplos de HTML
- Tutorial de CSS y ejemplos de CSS
- Tutorial de jQuery y ejemplos de jQuery
Publicación traducida automáticamente
Artículo escrito por tirtharajsengupta y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA