我正试图将注意力集中在溢出视口(viewport)的 contenteditable div 中的 html 元素。
有什么想法吗？
这是我目前的尝试
https://jsfiddle.net/pu8rvqex/3/
$(document).ready(function () {
$('.test_mark').focus();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div autofocus class="col-md-12 sol-sm-12 form-control" contenteditable="true" style="height:auto !important">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra lectus a arcu accumsan, ut varius nulla porta. In hac habitasse platea dictumst. Maecenas vel convallis eros. Phasellus aliquet leo non iaculis efficitur. Nunc placerat quis nulla et dignissim. Nulla porta vestibulum lorem, at euismod enim sodales in. Proin eleifend neque arcu, maximus iaculis orci convallis non. Maecenas ac aliquam felis. Etiam aliquet, lacus a consectetur auctor, ligula urna vulputate tellus, sed egestas nibh eros id elit. Nulla molestie orci lacus, ac ultricies mi feugiat ut. Fusce eleifend commodo velit sit amet convallis. Quisque at laoreet libero. Quisque eu ultricies magna. Maecenas bibendum porttitor nibh. Sed sit amet pulvinar lacus. Curabitur rutrum mattis arcu in mattis.
Morbi mattis ante neque, et egestas nunc eleifend et. Proin placerat accumsan ultricies. Integer at vehicula felis. Suspendisse posuere tortor a elit consequat auctor. Pellentesque turpis magna, rutrum vitae rutrum quis, fermentum quis sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam purus augue, tempus in nisi sit amet, pulvinar consectetur arcu.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis consequat venenatis ante, eu finibus magna posuere quis. Etiam id leo eu justo molestie consectetur vitae vel eros. Mauris maximus vel eros sit amet pellentesque. Nulla maximus id mi eget sodales. Quisque luctus metus vel turpis bibendum, a maximus sem placerat. Nullam nec tortor nec purus pretium volutpat a eget mauris. Donec volutpat ac sapien eget maximus. Duis placerat iaculis dolor eu efficitur. Proin sem metus, posuere et egestas non, consectetur ut purus. Cras metus felis, placerat id lacinia vitae, pharetra et urna. Sed volutpat elit est, id tempor turpis hendrerit et. Cras erat augue, lacinia gravida lorem quis, iaculis rhoncus ante. Mauris aliquam fringilla neque, at tempus turpis auctor vitae.
Ut ornare malesuada semper. Aenean a quam sagittis, vulputate erat vitae, tempor urna. Aenean dignissim eros non sodales tristique. Fusce hendrerit a metus nec vehicula. Fusce maximus nisi ut urna convallis varius. Nulla ornare finibus nisi. Nulla sagittis semper nisl, nec venenatis lorem dignissim in. Nunc pretium semper ultrices. Curabitur eros urna, lacinia pharetra eros at, dapibus fermentum libero. Vestibulum vel arcu quis magna vestibulum tempor. Praesent pulvinar ligula nisi, non consequat lectus placerat in.
Nam maximus, eros at lobortis ullamcorper, ipsum nulla tempor neque, et accumsan ante diam eget mi. Donec porttitor nisl vel sapien mattis scelerisque. Nullam mollis, ex nec congue feugiat, quam urna lobortis sapien, at rhoncus metus lacus vel augue. Etiam eu vehicula ipsum. Etiam eu blandit neque. Quisque erat magna, tincidunt sit amet aliquet at, dictum at libero. Phasellus facilisis sodales magna, iaculis congue ex aliquet vitae. Aliquam sed lacus in metus dictum ornare. Morbi elementum eros malesuada varius efficitur. Maecenas neque nunc, consequat ac tristique a, pharetra vitae erat. Phasellus mattis lectus sit amet ante malesuada facilisis. Sed malesuada id lectus eget tristique. Vivamus vitae leo in lectus posuere egestas.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra lectus a arcu accumsan, ut varius nulla porta. In hac habitasse platea dictumst. Maecenas vel convallis eros. Phasellus aliquet leo non iaculis efficitur. Nunc placerat quis nulla et dignissim. Nulla porta vestibulum lorem, at euismod enim sodales in. Proin eleifend neque arcu, maximus iaculis orci convallis non. Maecenas ac aliquam felis. Etiam aliquet, lacus a consectetur auctor, ligula urna vulputate tellus, sed egestas nibh eros id elit. Nulla molestie orci lacus, ac ultricies mi feugiat ut. Fusce eleifend commodo velit sit amet convallis. Quisque at laoreet libero. Quisque eu ultricies magna. Maecenas bibendum porttitor nibh. Sed sit amet pulvinar lacus. Curabitur rutrum mattis arcu in mattis.
Morbi mattis ante neque, et egestas nunc eleifend et. Proin placerat accumsan ultricies. Integer at vehicula felis. Suspendisse posuere tortor a elit consequat auctor. Pellentesque turpis magna, rutrum vitae rutrum quis, fermentum quis sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam purus augue, tempus in nisi sit amet, pulvinar consectetur arcu.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis consequat venenatis ante, eu finibus magna posuere quis. Etiam id leo eu justo molestie consectetur vitae vel eros. Mauris maximus vel eros sit amet pellentesque. Nulla maximus id mi eget sodales. Quisque luctus metus vel turpis bibendum, a maximus sem placerat. Nullam nec tortor nec purus pretium volutpat a eget mauris. Donec volutpat ac sapien eget maximus. Duis placerat iaculis dolor eu efficitur. Proin sem metus, posuere et egestas non, consectetur ut purus. Cras metus felis, placerat id lacinia vitae, pharetra et urna. Sed volutpat elit est, id tempor turpis hendrerit et. Cras erat augue, lacinia gravida lorem quis, iaculis rhoncus ante. Mauris aliquam fringilla neque, at tempus turpis auctor vitae.
Ut ornare malesuada semper. Aenean a quam sagittis, vulputate erat vitae, tempor urna. Aenean dignissim eros non sodales tristique. Fusce hendrerit a metus nec vehicula. Fusce maximus nisi ut urna convallis varius. Nulla ornare finibus nisi. Nulla sagittis semper nisl, nec venenatis lorem dignissim in. Nunc pretium semper ultrices. Curabitur eros urna, lacinia pharetra eros at, dapibus fermentum libero. Vestibulum vel arcu quis magna vestibulum tempor. Praesent pulvinar ligula nisi, non consequat lectus placerat in.
Nam maximus, eros at lobortis ullamcorper, ipsum nulla tempor neque, et accumsan ante diam eget mi. Donec porttitor nisl vel sapien mattis scelerisque. Nullam mollis, ex nec congue feugiat, quam urna lobortis sapien, at rhoncus metus lacus vel augue. Etiam eu vehicula ipsum. Etiam eu blandit neque. Quisque erat magna, tincidunt sit amet aliquet at, dictum at libero. Phasellus facilisis sodales magna, iaculis congue ex aliquet vitae. Aliquam sed lacus in metus dictum ornare. Morbi elementum eros malesuada varius efficitur. Maecenas neque nunc, consequat ac tristique a, pharetra vitae erat. Phasellus mattis lectus sit amet ante malesuada facilisis. Sed malesuada id lectus eget tristique. Vivamus vitae leo in lectus posuere egestas.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra lectus a arcu accumsan, ut varius nulla porta. In hac habitasse platea dictumst. Maecenas vel convallis eros. Phasellus aliquet leo non iaculis efficitur. Nunc placerat quis nulla et dignissim. Nulla porta vestibulum lorem, at euismod enim sodales in. Proin eleifend neque arcu, maximus iaculis orci convallis non. Maecenas ac aliquam felis. Etiam aliquet, lacus a consectetur auctor, ligula urna vulputate tellus, sed egestas nibh eros id elit. Nulla molestie orci lacus, ac ultricies mi feugiat ut. Fusce eleifend commodo velit sit amet convallis. Quisque at laoreet libero. Quisque eu ultricies magna. Maecenas bibendum porttitor nibh. Sed sit amet pulvinar lacus. Curabitur rutrum mattis arcu in mattis.
Morbi mattis ante neque, et egestas nunc eleifend et. Proin placerat accumsan ultricies. Integer at vehicula felis. Suspendisse posuere tortor a elit consequat auctor. Pellentesque turpis magna, rutrum vitae rutrum quis, fermentum quis sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam purus augue, tempus in nisi sit amet, pulvinar consectetur arcu.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis consequat venenatis ante, eu finibus magna posuere quis. Etiam id leo eu justo molestie consectetur vitae vel eros. Mauris maximus vel eros sit amet pellentesque. Nulla maximus id mi eget sodales. Quisque luctus metus vel turpis bibendum, a maximus sem placerat. Nullam nec tortor nec purus pretium volutpat a eget mauris. Donec volutpat ac sapien eget maximus. Duis placerat iaculis dolor eu efficitur. Proin sem metus, posuere et egestas non, consectetur ut purus. Cras metus felis, placerat id lacinia vitae, pharetra et urna. Sed volutpat elit est, id tempor turpis hendrerit et. Cras erat augue, lacinia gravida lorem quis, iaculis rhoncus ante. Mauris aliquam fringilla neque, at tempus turpis auctor vitae.
Ut ornare malesuada semper. Aenean a quam sagittis, vulputate erat vitae, tempor urna. Aenean dignissim eros non sodales tristique. Fusce hendrerit a metus nec vehicula. Fusce maximus nisi ut urna convallis varius. Nulla ornare finibus nisi. Nulla sagittis semper nisl, nec venenatis lorem dignissim in. Nunc pretium semper ultrices. Curabitur eros urna, lacinia pharetra eros at, dapibus fermentum libero. Vestibulum vel arcu quis magna vestibulum tempor. Praesent pulvinar ligula nisi, non consequat lectus placerat in.
Nam maximus, eros at lobortis ullamcorper, ipsum nulla tempor neque, et accumsan ante diam eget mi. Donec porttitor nisl vel sapien mattis scelerisque. Nullam mollis, ex nec congue feugiat, quam urna lobortis sapien, at rhoncus metus lacus vel augue. Etiam eu vehicula ipsum. Etiam eu blandit neque. Quisque erat magna, tincidunt sit amet aliquet at, dictum at libero. Phasellus facilisis sodales magna, iaculis congue ex aliquet vitae. Aliquam sed lacus in metus dictum ornare. Morbi elementum eros malesuada varius efficitur. Maecenas neque nunc, consequat ac tristique a, pharetra vitae erat. Phasellus mattis lectus sit amet ante malesuada facilisis. Sed malesuada id lectus eget tristique. Vivamus vitae leo in lectus posuere egestas.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra lectus a arcu accumsan, ut varius nulla porta. In hac habitasse platea dictumst. Maecenas vel convallis eros. Phasellus aliquet leo non iaculis efficitur. Nunc placerat quis nulla et dignissim. Nulla porta vestibulum lorem, at euismod enim sodales in. Proin eleifend neque arcu, maximus iaculis orci convallis non. Maecenas ac aliquam felis. Etiam aliquet, lacus a consectetur auctor, ligula urna vulputate tellus, sed egestas nibh eros id elit. Nulla molestie orci lacus, ac ultricies mi feugiat ut. Fusce eleifend commodo velit sit amet convallis. Quisque at laoreet libero. Quisque eu ultricies magna. Maecenas bibendum porttitor nibh. Sed sit amet pulvinar lacus. Curabitur rutrum mattis arcu in mattis.
Morbi mattis ante neque, et egestas nunc eleifend et. Proin placerat accumsan ultricies. Integer at vehicula felis. Suspendisse posuere tortor a elit consequat auctor. Pellentesque turpis magna, rutrum vitae rutrum quis, fermentum quis sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam purus augue, tempus in nisi sit amet, pulvinar consectetur arcu.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis consequat venenatis ante, eu finibus magna posuere quis. Etiam id leo eu justo molestie consectetur vitae vel eros. Mauris maximus vel eros sit amet pellentesque. Nulla maximus id mi eget sodales. Quisque luctus metus vel turpis bibendum, a maximus sem placerat. Nullam nec tortor nec purus pretium volutpat a eget mauris. Donec volutpat ac sapien eget maximus. Duis placerat iaculis dolor eu efficitur. Proin sem metus, posuere et egestas non, consectetur ut purus. Cras metus felis, placerat id lacinia vitae, pharetra et urna. Sed volutpat elit est, id tempor turpis hendrerit et. Cras erat augue, lacinia gravida lorem quis, iaculis rhoncus ante. Mauris aliquam fringilla neque, at tempus turpis auctor vitae.
Ut ornare malesuada semper. Aenean a quam sagittis, vulputate erat vitae, tempor urna. Aenean dignissim eros non sodales tristique. Fusce hendrerit a metus nec vehicula. Fusce maximus nisi ut urna convallis varius. Nulla ornare finibus nisi. Nulla sagittis semper nisl, nec venenatis lorem dignissim in. Nunc pretium semper ultrices. Curabitur eros urna, lacinia pharetra eros at, dapibus fermentum libero. Vestibulum vel arcu quis magna vestibulum tempor. Praesent pulvinar ligula nisi, non consequat lectus placerat in.
Nam maximus, eros at lobortis ullamcorper, ipsum nulla tempor neque, et accumsan ante diam eget mi. Donec porttitor nisl vel sapien mattis scelerisque. Nullam mollis, ex nec congue feugiat, quam urna lobortis sapien, at rhoncus metus lacus vel augue. Etiam eu vehicula ipsum. Etiam eu blandit neque. Quisque erat magna, tincidunt sit amet aliquet at, dictum at libero. Phasellus facilisis sodales magna, iaculis congue ex aliquet vitae. Aliquam sed lacus in metus dictum ornare. Morbi elementum eros malesuada varius efficitur. Maecenas neque nunc, consequat ac tristique a, pharetra vitae erat. Phasellus mattis lectus sit amet ante malesuada facilisis. Sed malesuada id lectus eget tristique. Vivamus vitae leo in lectus posuere egestas.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra lectus a arcu accumsan, ut varius nulla porta. In hac habitasse platea dictumst. Maecenas vel convallis eros. Phasellus aliquet leo non iaculis efficitur. Nunc placerat quis nulla et dignissim. Nulla porta vestibulum lorem, at euismod enim sodales in. Proin eleifend neque arcu, maximus iaculis orci convallis non. Maecenas ac aliquam felis. Etiam aliquet, lacus a consectetur auctor, ligula urna vulputate tellus, sed egestas nibh eros id elit. Nulla molestie orci lacus, ac ultricies mi feugiat ut. Fusce eleifend commodo velit sit amet convallis. Quisque at laoreet libero. Quisque eu ultricies magna. Maecenas bibendum porttitor nibh. Sed sit amet pulvinar lacus. Curabitur rutrum mattis arcu in mattis.
Morbi mattis ante neque, et egestas nunc eleifend et. Proin placerat accumsan ultricies. Integer at vehicula felis. Suspendisse posuere tortor a elit consequat auctor. Pellentesque turpis magna, rutrum vitae rutrum quis, fermentum quis sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam purus augue, tempus in nisi sit amet, pulvinar consectetur arcu.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis consequat venenatis ante, eu finibus magna posuere quis. Etiam id leo eu justo molestie consectetur vitae vel eros. Mauris maximus vel eros sit amet pellentesque. Nulla maximus id mi eget sodales. Quisque luctus metus vel turpis bibendum, a maximus sem placerat. Nullam nec tortor nec purus pretium volutpat a eget mauris. Donec volutpat ac sapien eget maximus. Duis placerat iaculis dolor eu efficitur. Proin sem metus, posuere et egestas non, consectetur ut purus. Cras metus felis, placerat id lacinia vitae, pharetra et urna. Sed volutpat elit est, id tempor turpis hendrerit et. Cras erat augue, lacinia gravida lorem quis, iaculis rhoncus ante. Mauris aliquam fringilla neque, at tempus turpis auctor vitae.
Ut ornare malesuada semper. Aenean a quam sagittis, vulputate erat vitae, tempor urna. Aenean dignissim eros non sodales tristique. Fusce hendrerit a metus nec vehicula. Fusce maximus nisi ut urna convallis varius. Nulla ornare finibus nisi. Nulla sagittis semper nisl, nec venenatis lorem dignissim in. Nunc pretium semper ultrices. Curabitur eros urna, lacinia pharetra eros at, dapibus fermentum libero. Vestibulum vel arcu quis magna vestibulum tempor. Praesent pulvinar ligula nisi, non consequat lectus placerat in.
Nam maximus, eros at lobortis ullamcorper, ipsum nulla tempor neque, et accumsan ante diam eget mi. Donec porttitor nisl vel sapien mattis scelerisque. Nullam mollis, ex nec congue feugiat, quam urna lobortis sapien, at rhoncus metus lacus vel augue. Etiam eu vehicula ipsum. Etiam eu blandit neque. Quisque erat magna, tincidunt sit amet aliquet at, dictum at libero. Phasellus facilisis sodales magna, iaculis congue ex aliquet vitae. Aliquam sed lacus in metus dictum ornare. Morbi elementum eros malesuada varius efficitur. Maecenas neque nunc, consequat ac tristique a, pharetra vitae erat. Phasellus mattis lectus sit amet ante malesuada facilisis. Sed malesuada id lectus eget tristique. Vivamus vitae leo in lectus posuere egestas.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra lectus a arcu accumsan, ut varius nulla porta. In hac habitasse platea dictumst. Maecenas vel convallis eros. Phasellus aliquet leo non iaculis efficitur. Nunc placerat quis nulla et dignissim. Nulla porta vestibulum lorem, at euismod enim sodales in. Proin eleifend neque arcu, maximus iaculis orci convallis non. Maecenas ac aliquam felis. Etiam aliquet, lacus a consectetur auctor, ligula urna vulputate tellus, sed egestas nibh eros id elit. Nulla molestie orci lacus, ac ultricies mi feugiat ut. Fusce eleifend commodo velit sit amet convallis. Quisque at laoreet libero. Quisque eu ultricies magna. Maecenas bibendum porttitor nibh. Sed sit amet pulvinar lacus. Curabitur rutrum mattis arcu in mattis.
Morbi mattis ante neque, et egestas nunc eleifend et. Proin placerat accumsan ultricies. Integer at vehicula felis. Suspendisse posuere tortor a elit consequat auctor. Pellentesque turpis magna, rutrum vitae rutrum quis, fermentum quis sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam purus augue, tempus in nisi sit amet, pulvinar consectetur arcu.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis consequat venenatis ante, eu finibus magna posuere quis. Etiam id leo eu justo molestie consectetur vitae vel eros. Mauris maximus vel eros sit amet pellentesque. Nulla maximus id mi eget sodales. Quisque luctus metus vel turpis bibendum, a maximus sem placerat. Nullam nec tortor nec purus pretium volutpat a eget mauris. Donec volutpat ac sapien eget maximus. Duis placerat iaculis dolor eu efficitur. Proin sem metus, posuere et egestas non, consectetur ut purus. Cras metus felis, placerat id lacinia vitae, pharetra et urna. Sed volutpat elit est, id tempor turpis hendrerit et. Cras erat augue, lacinia gravida lorem quis, iaculis rhoncus ante. Mauris aliquam fringilla neque, at tempus turpis auctor vitae.
<span id="#test_mark" class="test_mark">do not like</span>
Ut ornare malesuada semper. Aenean a quam sagittis, vulputate erat vitae, tempor urna. Aenean dignissim eros non sodales tristique. Fusce hendrerit a metus nec vehicula. Fusce maximus nisi ut urna convallis varius. Nulla ornare finibus nisi. Nulla sagittis semper nisl, nec venenatis lorem dignissim in. Nunc pretium semper ultrices. Curabitur eros urna, lacinia pharetra eros at, dapibus fermentum libero. Vestibulum vel arcu quis magna vestibulum tempor. Praesent pulvinar ligula nisi, non consequat lectus placerat in.
Nam maximus, eros at lobortis ullamcorper, ipsum nulla tempor neque, et accumsan ante diam eget mi. Donec porttitor nisl vel sapien mattis scelerisque. Nullam mollis, ex nec congue feugiat, quam urna lobortis sapien, at rhoncus metus lacus vel augue. Etiam eu vehicula ipsum. Etiam eu blandit neque. Quisque erat magna, tincidunt sit amet aliquet at, dictum at libero. Phasellus facilisis sodales magna, iaculis congue ex aliquet vitae. Aliquam sed lacus in metus dictum ornare. Morbi elementum eros malesuada varius efficitur. Maecenas neque nunc, consequat ac tristique a, pharetra vitae erat. Phasellus mattis lectus sit amet ante malesuada facilisis. Sed malesuada id lectus eget tristique. Vivamus vitae leo in lectus posuere egestas.
</div>
</div>最佳答案
解决方案是设置contenteditable="true"跨度 .test_mark并将其包裹在另一个 <span> 中与 contenteditable="false"
希望这对您有所帮助。
关于javascript - 如何关注设置为自动高度和溢出的内容可编辑的 div 中的元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49191665/