ansaurus

Question

Answer 1

+1 A:

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.

Wil 2010-03-09 15:40:05

Thanks Wil for your help.I have tried to put tabindex="0" to the <p> but it doesn't work.

sanceray3 2010-03-09 16:03:56

Answer 2

A:

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"&gt;&lt;/script&gt;
    <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.

Jeremy 2010-03-09 17:04:03

Thanks Jer for your "concept". I have tried it but in my case I can already enter text into <p> element with the option contenteditable="true" on my parent div . For explain you, I have <div> with some <p>. I have created a "event" which when I press Enter, create a another <p>. It functions well but I don't have the cursor / the Focus on this new element. It's my problem, because I try to develop a little WYSIWYG editor, and it will be better to have the focus when I change on a new <p>.

sanceray3 2010-03-09 20:48:08

Answer 3

A:

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.

sw 2010-03-14 01:43:10

Answer 4

+1 A:

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

Doug D 2010-03-17 15:59:52

Thanks very much for your help.

sanceray3 2010-03-17 20:43:28

ansaurus

tags:

views:

answers:

Define cursor on element

related questions