在元素上定义光标答案

【问题标题】：Define cursor on element在元素上定义光标
【发布时间】：2010-03-09 13:51:40
【问题描述】：

我试图解释我的问题。

我有一个<div contenteditable="true" id="my_editeur>，我在其中定义了一个按键“事件”，它允许我在用户单击“输入”时添加一个“p”。

它运行良好，但我想在这个新的“p”元素上定义光标，因为目前我的光标停留在第一个“p”元素上。

我曾尝试使用 jquery 焦点功能，但似乎我们不能将此功能用于“p”元素。

你知道我该如何解决我的问题吗？

非常感谢您的帮助。

我的代码：

$('#my_editeur').keypress(function(e){
        if(e.keyCode == 13) {
            e.preventDefault();
            $(this).append('<p ><br /></p>');          
        }
    });

【问题讨论】：

这很有趣，因为“设计模式”的扭曲。不幸的是，我不太了解如何在这种情况下设置样式。
它应该有办法，因为如果我不使用'e.preventDefault();'在我的按键功能中，我的浏览器会自动添加一个新的
与定义的焦点对齐。

标签： jquery cursor contenteditable

【解决方案1】：

不确定这是否可行，但您是否尝试将tabindex="0" 添加到<p>？这意味着它可以在大多数浏览器中获得焦点。

【讨论】：

感谢威尔的帮助。我试图将 tabindex="0" 放入
但它不起作用。

【解决方案2】：

创建段落时，包括一个不间断的空格。

var newP = $("<p>&#160;</p>").get(0);

对于 Firefox 和符合标准的浏览器，

var rng = document.createRange();
rng.selectNodeContents(  newP  );
var sel = document.defaultView.getSelection();
sel.removeAllRanges();                          
sel.addRange(rng);

对于 IE，

var rng = document.body.createTextRange();
rng.moveToElementText(  newP );
rng.select();

【讨论】：

非常感谢您的帮助。

【解决方案3】：

如果我错了，请纠正我，但您希望能够将文本输入到 <p> 元素中，就像它是 <input> 或 <textarea> 一样？如果是这样，这是我整理的一个技巧。这显然不完整，只是一个概念证明。

<!doctype html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">

      $(document).ready(
        function(){

          $('#textbox').click(
            function(){
              $(this).css('border','1px solid #f00');
              $('#mytext').focus();
            }
          );

          $('#mytext').keypress(
            function(event){

              if(event.keyCode==13){
                $('#textbox').append('<br>');
              }
              else{
                $('#textbox').append(String.fromCharCode(event.which));
              }
            }
          );

        }
      );

    </script>
    <style type="text/css">

      #mytext{
        position: fixed;
        top: -100px;
        left: 0;
      }

    </style>
  </head>
  <body>
    <input type="text" id="mytext" tabindex="0">
    <div id="textbox"><span>hello</span></div>
  </body>
</html>

您应该可以点击上面写着“你好”的<div> 并在其中输入更多文字。

【讨论】：

感谢 Jer 的“概念”。我已经尝试过了，但在我的情况下，我已经可以在我的父 div 上使用选项 contenteditable="true" 将文本输入到
元素中。为了解释你，我有

和一些
。我创建了一个“事件”，当我按 Enter 时，创建另一个

。它运行良好，但我没有光标/焦点在这个新元素上。是我的问题，因为我尝试开发一个WYSIWYG的小编辑器，换一个新的

时有重点会更好。

【解决方案4】：

你能在新的

中将选择设置为DOMRange 吗？我想用 windows.getSelection() 来检索当前的 DOMRange 并更改它的 startContainer、endContainer、startOffset、endOffset。

【讨论】：