问题:
div内部有很多元素,div、 p、 span 、input等,各元素有嵌套,现在点击某元素时需要最外面这个div边框高亮,例如,点击了input开始输入
假设html 结构如下
<div>
<p>最外部div高亮测试</p>
<div>用vue如何实现选中下面这个input最外面的div边框会高亮<br/>
<input type=text placeholder="请输入内容"/>
</div>
</div>
解决要点
1. div要获得焦点,需要设置tabindex这个属性,值为-1(可以获得焦点事件,但不能用tab键选中,tabindex>=0时可以,这里设置为-1即可)
2.检测focusin和focusout事件并改变div的class(focus并不会向父级传播)
在线演示代码
https://jsfiddle.net/f4rzn85o/3/