I want to make a basic text editor using angularjs (or just pure javascript). The idea is that I will have a div to contain the text, instead of using textarea. I want the user to be able to click anywhere inside the div and have a blinking cursor appear where they click. I really have no idea how to do this. Any suggestions? By the way, I would prefer not to use contentEditable.

I want to make a basic text editor using angularjs (or just pure javascript). The idea is that I will have a div to contain the text, instead of using textarea. I want the user to be able to click anywhere inside the div and have a blinking cursor appear where they click. I really have no idea how to do this. Any suggestions? By the way, I would prefer not to use contentEditable.

• javascript
• angularjs

Share Improve this question Follow asked Jan 24, 2014 at 14:15 Chris PatersonChris Paterson 1,14955 gold badges2121 silver badges3232 bronze badges 4

• Why not contenteditable? – Moritz Petersen Commented Jan 24, 2014 at 14:20
• @MoritzPetersen: It seems he wants to do it manually, as programming exercise. – Cerbrus Commented Jan 24, 2014 at 14:21
• @Mortiz seems right ... and the contentEditable piece seems required because the browser's edit capabilities are not pletely separated from the OS's understanding that something is a field for data entry and modification ... hence the cursor being a blinking I/O signal... I/O is serious business. It can't be simulated or "treated" as I/O ... either it's I/O or it's not. That's why HTML is so particular about which items are editable. It transcends the browser and gets into OS/hardware input/output. – digitalextremist Commented Jan 24, 2014 at 14:21
• The OP explicitly stated he didn't want to use contenteditable. He wants to do it manually. For that reason, this is not a duplicate, and should be re-opened. – Cerbrus Commented Jan 31, 2014 at 7:55

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

Since you prefer not to use contenteditable, Here's a few suggestions you could have a look at to get a blinking cursor, manually:

• Overlay the div with a canvas element, get the click's position, and animate a line on the canvas at that position.
• Overlay a animated .gif containing the blinking line at the click's position.
• Use a animated .gif containing the blinking line as the div's background, and set the background-position, depending on the click's location.
• For the above two suggestions, instead of a .gif, you can use a static image, and toggle it.

You'll have to keep in mind that the line will have to snap to the closest character boundary, so you won't have your cursor blinking in the middle of a character. Using a monospaced font would make that a lot easier.

You will still have to write the other features a text field has, though:

• Text manipulation.
• Selections.
• Copy / pasting

You can make the div editable by adding contentEditable="true" attribute to the div element.

<div contentEditable="true"></div>

As you mentioned you wanted to avoid using of contentEditable then you can go for Javascript/Jquery plugin. It will be very easy for you if you use plugin rather developing it on your own. Here is a jquery plugin which can e in handy. http://www.appelsiini/projects/jeditable

you could try setting the div to contenteditable

<div contenteditable>
</div>

JSFiddle

Seems you are looking for html5 contenteditable attribute.

http://html5demos./contenteditable