javascript - 如何检测一个FORM的整个FOCUS
本文介绍了javascript - 如何检测一个FORM的整个FOCUS的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
问题描述:
做一个表格;初始状态只显示一个input field,当获得focus的时候会显示出其他的input.
我在做这个form的时候不能同时解决以下问题:
第一种:当鼠标点击空白块(表格外面的的区域时),表格应还原倒初始状态(只显示一个input field)
第二中:当鼠标点击form里面的input的时候,不会还原初始状态,会保持显示全部的input field)
以下为代码-用的vue.js 2.0-- 类似的例子是google keep (添加note的那个表格)
<form @focusin="isFocus=true" @focusout="isFocus=false" tabindex="0" class="column is-3 is-offset-4 hero is-primary">
<p class="control">
<input @focusin="isFocus=true" class="input is-warning" spellcheck="true" type="text" placeholder="Title">
</p>
<p v-if="isFocus" class="control">
<textarea class="textarea is-hovered" spellcheck="true" placeholder="Take a note..."></textarea>
</p>
<p v-if="isFocus" class="control">
<input class="input is-hovered" type="text" placeholder="Tag">
</p>
<p v-if="isFocus" class="control">
<button class="button is-warning is-pulled-right"> <span class="icon is-small">
<i class="fa fa-check"></i>
</span>
<span>Done</span></button>
</p>
</form>
</div>
</template>
<script>
export default {
name: 'note',
data () {
return {
notes: [],
isFocus: false
}
},
methods: {
}
}
</script>
解决方案
<form @focusin.self="isFocus=false" tabindex="0" class="column is-3 is-offset-4 hero is-primary">
https://jsfiddle.net/KingMari...
或者用 focus 事件,参见:https://developer.mozilla.org...
focusin 事件会冒泡,focus 事件不冒泡
这篇关于javascript - 如何检测一个FORM的整个FOCUS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文