Очистить сфокусированное поле с помощью специальной кнопки «сброса»

Question

Я пытаюсь взять кнопку и сделать ее кнопкой сброса для одного поля в нескольких формах поля.

<button id ="resetbutton" type="button">reset focused field</button> 
<script type="text/javascript"> 

document.getElementById('resetbutton').onclick= function() { 
     // Get the focused element: 
     var $focused = $(':focus'); 
     var field= document.getElementById($focused); 
     field.value= ""; 
    }; 
</script> 

переменное целенаправленное поле не работает для меня, и он не получает сфокусированное поле, которое мне нужно сбросить, какие-либо предложения?

может быть, когда я нажимаю кнопку, я получаю фокус на кнопке, но то, что я действительно хочу, - это последнее сфокусированное поле.

Answer 1

Если вы извлекли сфокусированный элемент одним нажатием кнопки, этот элемент всегда будет терять фокус непосредственно перед этим. Чтобы получить идентификатор ранее сфокусированного элемента, вы должны отслеживать сфокусированные элементы. Создайте переменную last_focused, которая содержит идентификатор для последнего сфокусированного элемента и обновит его, когда когда-либо один из ваших элементов формы получает фокус. Затем, когда вы нажимаете на свой resetbutton, просто используйте это значение для обработки элемента.

Answer 2

Развивая ответ Лоуренса, это то, как вы могли бы реализовать:

var previouslyFocused; 
 

 
$("input").on("blur", function(){ 
 
    previouslyFocused = this.id; 
 
}); 
 

 
$("button").on("click", function(e){ 
 
    e.preventDefault(); 
 
    $("#" + previouslyFocused).val(""); 
 
});

input{ 
 
    margin: 5px; 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form> 
 
    <input type="text" id="name" placeholder="Name" /> 
 
    <input type="text" id="age" placeholder="Age" /> 
 
    <input type="text" id="address" placeholder="Address" /> 
 
    <input type="text" id="shoeSize" placeholder="Shoe size" /> 
 
    <button>Reset focused field</button> 
 
</form>

Answer 3

Элегантное решение для того, чтобы использовать html5 типа ввода «поиск», который добавляет небольшой «X «рядом с этим входом, чтобы вы могли сбросить его по отдельности.