CODEWITHSUNDEEP
jquerycontenteditabletext-cursor
sanceray3
sanceray3

Reputation: 195

Define cursor on element

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 cursor 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>');          
        }
    });

Upvotes: 4

Views: 386

Answers (4)

Doug Domeny
Doug Domeny

Reputation: 4470

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();

Upvotes: 1

sw.
sw.

Reputation: 3231

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.

Upvotes: 0

Jeremy
Jeremy

Reputation: 22415

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.

Upvotes: 0

Wil
Wil

Reputation: 5057

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.

Upvotes: 1

Related Questions