如何让div获取焦点或可编辑

最新推荐文章于 2023-07-02 12:45:18 发布

转载最新推荐文章于 2023-07-02 12:45:18 发布 · 2.4w 阅读

HTML 专栏收录该内容

3 篇文章

订阅专栏

本文介绍两种使DIV元素获得焦点的方法：一是通过设置contenteditable属性使其成为可编辑元素；二是使用tabindex属性，即使内容不可编辑也能获取焦点。后者在Tab键导航中特别有用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

	做项目的时候，想用到segment组件，由于是ionic2的组件，ionic1 用不了，就想自己写一个类似的组件。其中，想让div实现获取焦点的功能，使用的js或jq并没有效果。于是，上网搜索了一下，发现连个很好用的属性可以实现，于是做一下笔记。

	DIV获取焦点（两种方法）：
	需添加tabindex="0"或者contenteditable="true"属性
	①：设置div为可编辑状态，则可点击获取焦点，同时div的内容也是可以编辑的；如：
	<div  contenteditable="true">11111111111111</div>
	②：设置div的tabindex，此时div的内容是不可编辑的；如：
	<div  tabindex="0">11111111111111</div>
	PS:设置tabindex属性，按键盘Tab键可让其获取焦点，其中tabindex的值越小在tab键切换的时候就会首先聚焦。
	最后，感谢前作者的分享。