Cómo borrar los campos de entrada en JavaScript
Puede haber una situación en la que se requiere borrar el valor ingresado de un campo de entrada o todo el formulario. Por ejemplo, debe cambiar la categoría o encontrar un requisito específico para cambiar todos los datos ingresados. En tales casos, la limpieza de los campos de entrada usando JavaScript se vuelve muy efectivo y útil.
Este artículo discutirá los métodos para borrar los campos de entrada en JavaScript.
Cómo borrar los campos de entrada en JavaScript?
Para borrar los campos de entrada en JavaScript, se pueden utilizar los siguientes enfoques:
- Evento "Onfocus" y propiedad "Target"
- Evento "OnClick" y "Documento.método getElementById () "
- Método "RESET ()"
Pasar por los métodos discutidos uno por uno!
Método 1: Borrar los campos de entrada en JavaScript utilizando el evento Onfocus y la propiedad de destino
El "enfocado"El evento se activa cuando un elemento específico se enfoca y el"objetivo"La propiedad devuelve el elemento que activó el evento. Más específicamente, estas técnicas se pueden aplicar para borrar el valor de destino especificado en el campo de entrada.
El siguiente ejemplo explica el concepto discutido claramente.
Ejemplo
En el siguiente ejemplo, asignaremos un tipo de entrada como "texto"Con el valor especificado y adjuntar como evento Onfocus, que activará la función ClearInput ():
Ahora, defina la función llamada "ClearInput ()" con el "objetivo"Propiedad como argumento para devolver el elemento que desencadenó el evento. Después de eso, se aplicará una condición específica que si el campo de entrada contiene un valor particular, como "Entrada clara", Se borrará el campo de entrada:
función ClearInput (Target)if (objetivo.value == 'Clear Input')
objetivo.valor = "";
Ahora, cuando el usuario ingresará "Entrada clara"Valor en el campo de entrada y obtiene enfoque, el valor ingresado quedará claro:
Método 2: Borrar los campos de entrada en JavaScript usando el evento y el documento OnClick.método getElementById ()
En JavaScript, el "documento.getElementById ()"El método se utiliza para acceder a un elemento basado en su ID y"al hacer clic"Se usa para adjuntar un evento a un elemento HTML. Más específicamente, esta combinación se puede usar de tal manera cuando se haga clic en el botón agregado, se accederá al elemento de campo de entrada y se borrará el valor ingresado.
Ejemplo
En primer lugar, asigne un tipo de entrada con un ID llamado como "nombre":
Luego, cree un botón con un valor llamado "claro"Y agregue un"al hacer clic"Evento que accederá a la función ClearInput () cuando se active:
Ahora, defina una función llamada "ClearInput ()". Aquí, el documento.getElementById () accederá al campo de entrada utilizando su ID. Entonces, un "si"La condición se aplicará para que mientras el campo de entrada no esté vacío, el valor del campo de entrada se establecerá como vacío:
función ClearInput ()var getValue = documento.getElementById ("nombre");
if (getValue.valor != "")
valiente.valor = "";
En este escenario, hacer clic en el botón agregado borrará el valor del campo de entrada:
Desea restablecer todos los valores del campo de entrada a la vez? Consulte el siguiente método.
Método 3: Borrar los campos de entrada en JavaScript usando el método RESET ()
El "reiniciar()"El método borra todos los valores de los elementos de formulario. Este método se puede implementar para borrar el campo de contenido de entrada con un clic de un botón.
Sintaxis
formobject.reiniciar()Aquí, "formobject"Es el elemento que se restablecerá.
Eche un vistazo al ejemplo dado.
Ejemplo
Primero, cree un formulario y asigne una ID como se demuestra a continuación. A continuación, solicite al usuario que ingrese un "IDENTIFICACIÓN"En el campo de entrada. Luego, incluya un botón con un "al hacer clic"Evento acceder a una función como se discute en el método anterior:
Finalmente, declare una función llamada "ClearInput ()”, Obtenga el formulario usando el documento.Método GetElementById () y restablecer el campo de entrada en el botón Haga clic:
función ClearInput ()documento.getElementById ("Formulario").reiniciar();
Producción
Hemos demostrado las técnicas para borrar los campos de entrada en JavaScript.
Conclusión
Para borrar los campos de entrada en JavaScript, utilice el "enfocado"Evento y"objetivo"Propiedad para aplicar la funcionalidad basada en la presencia de un valor particular, o el"al hacer clic()"Evento y"documento.getElementById ()"Método para obtener la ID del campo de entrada y borrar el campo siempre que haya algún valor en él o en el"reiniciar()Método para restablecer los valores de todo el campo de entrada a la vez. Este artículo ha explicado los métodos para borrar los campos de entrada especificados en JavaScript.