Define cursor on element_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-22 04:11 出处：网络

I try to explain my problem. I have a <div contenteditable=\"true\" id=\"my_editeur>, where I have defined a keypress “event” which allow me to add a ‘p’ when the user clicks on “enter”.

I try to explain my problem.

I have a <div contenteditable="true" id="my_editeur>, where I have defined a keypress “event” which allow me to add a ‘p’ when the user clicks on “enter”.

It functions well, but I would like define the cursor on this new ‘p’ element, because currently my cu开发者_Go百科rsor stays on the first 'p' element.

I have tried to use jquery focus function but it seems that we can’t use this function for ‘p’ elements.

Do you know how I can do to solve my problem?

Thanks very much for your help.

My code :

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

Not sure if this would work, but have you tried adding a tabindex="0" to the <p>? That would mean it could have focus in most browsers.

When creating the paragraph, include a non-breaking space.

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

For Firefox and standards-compliant browsers,

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

For IE,

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

Correct me if I am wrong but you want to be able to enter text into a <p> element as if it were a <input> or a <textarea>? If so, here is a hack I put together. It's obviously not complete, just a proof of concept.

<!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>

You should be able to click on the <div> that says "hello" and type more text into it.

Could you set the selection to a DOMRange inside the new <p> ? I suppose doing windows.getSelection() to retrieve the current DOMRange and changing its startContainer,endContainer, startOffset, endOffset.