Определить курсор на элементе - PullRequest
Новая
       27

Определить курсор на элементе

4 голосов
/ 09 марта 2010

Я пытаюсь объяснить мою проблему.

У меня есть <div contenteditable="true" id="my_editeur>, где я определил «событие» нажатия клавиши, которое позволяет мне добавлять «p», когда пользователь нажимает «enter».

Он работает хорошо, но я бы хотел определить курсор на этом новом элементе p, поскольку в данный момент мой курсор остается на первом элементе p.

Я пытался использовать функцию фокуса jquery, но кажется, что мы не можем использовать эту функцию для элементов "p".

Знаете ли вы, как я могу решить мою проблему?

Большое спасибо за вашу помощь.

Мой код: 

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

Ответы [ 4 ]

1 голос
/ 17 марта 2010

При создании абзаца включайте неразрывный пробел. 

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();
1 голос
/ 09 марта 2010

Не уверен, что это сработает, но вы пытались добавить tabindex="0" к <p>? Это означало бы, что в большинстве браузеров он может иметь фокус.

0 голосов
/ 14 марта 2010

Не могли бы вы выбрать DOMRange внутри нового

? Я предполагаю, что делать windows.getSelection () для получения текущего DOMRange и изменения его startContainer, endContainer, startOffset, endOffset.

0 голосов
/ 09 марта 2010

Поправьте меня, если я ошибаюсь, но вы хотите иметь возможность вводить текст в элемент <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> с надписью "привет" и ввести в него больше текста.

...