how to type text to a div

[shadiadiph]

is there any easy way to set a cursor to a div so that you can type in a div onclick?

[MartinRinehart]

is there any easy way to set a cursor to a div so that you can type in a div onclick?

Use a textarea in the div.

[fornandakishore]

Yes, you can use TEXTAREA inside that div

e.g. <textarea cols="40" rows="5" style="background:none; border:medium none;"></textarea>

[shadiadiph]

I have tried using a textarea for the last three days but i want the user to be able to change the font styles while typing it is impossible to have two conflicting styles in a textarea

[MartinRinehart]

I have tried using a textarea for the last three days but i want the user to be able to change the font styles while typing it is impossible to have two conflicting styles in a textarea

Correct. I've looked at this in wanting to write a good code editor in JS. I love JS but have concluded that it can't be done. To have decent keyboard sensitivity, you have to use a textarea, not a more generic element. Textareas, however, have limits such as the one you noted.

Try a div and listen for keys up or down. Test arrow keys, Insert, Delete and whatever elese you care about. Let us know if you can get your job done. I just discarded the idea of doing keyboard shortcuts in an app because I couldn't get the shortcuts past the browser's listening for, and not passing on, their own shortcuts.

One more gotcha. JS strings are immutable. String += char is going to create a new string. Slow. Pushing new chars onto an array of char will be a lot faster.

[Taywin]

You can do it either in div or textarea; however, the approach is a bit different. You need a highlight for div because there is no cursor location in div display (only highlight). In textarea, you can get the current cursor or highlight area. I did it for the company I am working for (and it is cross-browser), but I cannot disclose the code because it is proprietary code. Also, it requires a bit more understanding in JavaScript.

So what I can tell you is to look for range selection as I said in other two threads. If you want to see an example for textarea, look how tinyMCE (WYSIWYG editor) does with their code. It does what you are looking for in text area. Though, you need to understand it before you utilize it to the way you want.

[lambing]

Hi, I have done this before, writing a text on a diva.. wow, it's really cool. So how would you do that? First, you must have a div element and a form with an input type text. You must set the width and the height of the div element to wrap up the text element. You must set the border of the text box to 0 and it's width to 1px.

Then, what you have to do is to apply some JavaScript on the div element. Use the onclick event around the div and inside the onclick function your cursor should focus on the text box using focus() method. Then, add another keydown and keypress event on the text box. Everytime the user types on something, you should set the innerHTML of the div with what was typed in the texbox. And that's it, you just have to play around your css to make it work.