How to clean a specific field in javascript?

2

I'm with a form with different fields (name, surname, etc.)

How could I do in JavaScript in the field that has the focus when I press a "Clean" button. And apart, I have the RESET button that cleans all the fields.

This would be my HTML for example:

<form>
    <label>Nombre:</label><br>
    <input type="text" id="nombre" value="" placeholder="Nombre"/><br>
    <label>Primer Apellido:</label><br>
    <input type="text" id="apellido1" value="" placeholder="Primer Apellido"/><br>
    <label>Segundo Apellido:</label><br>
    <input type="text" id="apellido2" value="" placeholder="Segundo Apellido"/><br>
    <label>Contraseña</label><br>
    <input type="password" id="password" value="" placeholder="Password" /><br>
    <input type="reset" id="reset" value="Reiniciar">
    <input type="button" id="limpiar" value="Limpiar Campo">
    <input type="button" id="enviar" value="Enviar">
</form>

And this is the JS:

window.onload = inicio;

function inicio(){
    document.getElementById("limpiar").addEventListener('click',limpiar);
}

function limpiar(){
    var activo = document.activeElement.id;
    activo.innerHTML = "";
}

The issue is that I want to clean the text field that has the focus, but of course, that field loses it immediately when you click clean.

I hope it's clearer now what I'm looking for. Thanks.

    
asked by acensito 15.02.2017 в 15:15
source

3 answers

4

// Creamos variable que almacenara el ID a borrar
var inputfocused = "";

// Le añadimos función de borrar al botón
document.getElementById("clearbutton").onclick = limpiaCampo;

// En este caso concreto seleccionamos todos los input text y password
// para una selección más precisa se puede usa una clase
// para una selección más general, se puede usar solo 'input'
var elements = document.querySelectorAll("input[type='text'],input[type='password']");
// Por cada input field le añadimos una funcion 'onFocus'
for (var i = 0; i < elements.length; i++) {
  elements[i].addEventListener("focus", function() {
    // Guardamos la ID del elemento al que hacemos 'focus'
    inputfocused = this;
  });
}

function limpiaCampo() {
  //Utilizamos el elemento al que hacemos focus para borrar el campo.
  inputfocused.value = "";
}
<input type="text" placeholder="campo 1" value="asdads" />
<input type="text" placeholder="campo 2" value="asd234234ads" />
<input type="text" placeholder="campo 3" value="asdwrwerfads" />
<input type="password" placeholder="campo 4" value="asdadfdgdds" />

<button id="clearbutton"> Limpiar Focus</button>
    
answered by 15.02.2017 / 17:22
source
0

To clean a specific text field you could do it in the following way.

Having this in your HTML:

<input type="text" id="prueba"/>
<button onclick="limpiar()">Limpiar</button>

You can do it with Javascript like this:

function limpiar() {
    document.getElementById("prueba").value = "";
}

I leave a functional example in JSFiddle

    
answered by 15.02.2017 в 15:26
0

You could try this:

var ultimo = null;

function marcar(elemento) {
  ultimo = elemento;
}

function limpiar() {
  if (ultimo != null) {
  	ultimo.value = "";
  }
}
<input type="text" onfocus="marcar(this);">
<br>
<input type="text" onfocus="marcar(this);">
<button onclick="limpiar()">Limpiar</button>
    
answered by 15.02.2017 в 17:45