Jquery问题，点击一个元素，怎么设置光标在另一个元素里的位置？
使用Jquery，点击A元素，怎么设置光标到B元素里，并且在最后的位置。（B元素是DIV,有contenteditable="true" 属性）
以下代码，点了A后，光标都是在B元素里最前面。。。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试</title>
<style type="text/css">
.aaa{ height:36px; line-height:36px; width:500px; margin:50px auto 0; border:1px solid #ccc; font-size:18px;background:#f5f5f5;cursor:pointer; }
.bbb{ width:380px; float:left; height:34px; border:1px solid #ccc; background:#fff; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div class="aaa">
<div class="bbb" contenteditable="true">光标怎么才能在最后</div>
点我
</div>
<script type="text/javascript">
$(function(){
$(".aaa").click(function(){
$(".bbb").focus();
})
})
</script>
</body>
</html>
展开
收起
1
条回答
写回答
写回答
-
function placeCaretAtEnd(el) { el.focus(); if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") { var range = document.createRange(); range.selectNodeContents(el); range.collapse(false); var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } else if (typeof document.body.createTextRange != "undefined") { var textRange = document.body.createTextRange(); textRange.moveToElementText(el); textRange.collapse(false); textRange.select(); } } $(function() { $(".aaa").click(function() { placeCaretAtEnd($('.bbb')[0]); }) })另外，建议“点我”不要是div.aaa下的文本节点，因为现在这样 div.aaa>div.bbb,你点击div.bbb时同样触发div.aaa的点击事件(冒泡)，光标会直接跳到最后。将事件注册到 span#clickme 上就可以解决了。
2019-07-17 19:11:14赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
