使用特殊的“重置”按钮清除聚焦区域

时间:2014-12-21 11:39:50

标签: jquery html

我正在尝试按一个按钮并将其设置为多字段形式的一个字段的重置按钮。

<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>

聚焦的字段变量对我不起作用,它没有得到我需要重置的重点字段,任何建议?

也许当我按下按钮时我会专注于按钮,但我真正想要的是最新专注的领域。

3 个答案:

答案 0 :(得分:3)

如果通过单击按钮检索聚焦元素,则相关元素将始终失去焦点。要获取先前聚焦元素的ID,您应该跟踪聚焦元素。创建一个last_focused变量,其中包含最后一个焦点元素的ID,并在其中一个表单元素获得焦点时更新它。然后,当您单击resetbutton时,只需使用此值来处理元素。

答案 1 :(得分:0)

扩展劳伦斯的答案,这就是你如何实现它:

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>

答案 2 :(得分:0)

一个优雅的解决方案是使用html5类型输入&#34;搜索&#34;这增加了一个小的&#34; X&#34;在输入旁边,您可以单独重置它。