我认为这道题是一个挺有意思的题,但是回答正确的面试者很少,今天我来聊一聊。先上 DJ,哦不对先上 DEMO,测试地址:https://www.lilnong.top/static/html/textarea-event-test.html
获取焦点 (focus)、失去焦点(blur)。
属于 FocusEvent
接口。
属于 KeyboardEvent
接口
输入时实时触发(输入的字符已经可以被获取到),发生在 keypress
之后。
属于 InputEvent
接口
可以理解为 失去焦点前判断,如果内容被改变就触发事件。
属于 Event
接口
keypress
、keydown
阻止默认事件即可 preventDefault()
input 事件中有 isComposing
可以用来区分是不是输入法。
而且也可以看到在 Vue 中,输入法状态也没有获取。
前端培训-初级阶段-场景实战(2019-05-30)-input 搜索如何防抖,如何处理中文输入
在默认情况下,v-model
在每次 input
事件触发后将输入框的值与数据进行同步 (除了上述 输入法组合文字时)。
lazy
修饰符会使同步在 change
事件_之后_进行:
<!-- 在“change”时而非“input”时更新 --> <input v-model.lazy="msg">
如何让 Vue.js 在 setInterval 实现倒计时的情况下保证 input 正常输入?
测试地址
focus、blur 是不会冒泡的,冒泡需要使用 focusin、foucusout。
.native
是用来做什么的?使用上有什么注意的吗?用来监听自定义组件的原生事件。
这里需要注意:如果监听的事件是不支持冒泡的,那么有可能是监听不到的。
比如 focus
,只有根节点是 <input>
、<textarea>
这种可以获取焦点的元素的才可以监听到 demo传送门,如果是 div
、label
、p
这种无焦点的就无法监听。
欢迎大家关注我的公众号。有疑问也可以加我的微信前端交流群。