Search code examples
javascriptiframefocuswysiwygautofocus

how to auto-focus iframe on bodyload


I am working on a WYSIWYG text editor and I'm using iframe as the textarea, i want the textarea to be selected as soon as the page loads. i tried the onload event and the focus() function but both didn't work.

here is the code:

<iframe name="richTextField" id="richTextField" style="border:#000000 1px solid; width:700px; height:300px;" ></iframe>

And the javascript

function iFrameOn(){
richTextField.document.designMode = 'On';
}

Solution

  • A better approach is not to use IFrames.. They're not the most flexible when working with the DOM or any HTML elements.

    A good approach is a element such as section without Javascript for the basics all you need is :

    <section id="editable" contenteditable="true"></section>
    

    Would be a simple example Fiddle

    From here you can edit as you wish..

    Because it has HTML markup you can have events (javascript) to append/ apply BOLD etc etc. All the WYSIWYG.

    Good luck with your editor!