Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make a div with a blinking cursor and editable text without using <input>?

I need to make a div layer so that when you click on it you will have your cursor there blinking and you can insert/delete text just like <input type="text"> does, except that I do not want to use it as it is slightly too limited to my case.

I can definitely use JavaScript.

like image 517
Tower Avatar asked May 19 '09 11:05

Tower


People also ask

How do I remove the input cursor?

Approach: First, select the element where cursor element need to hide. Add CSS style cursor:none to the a class. Add the class name (class name of CSS style cursor:none) to the particular element where cursor element to be hide.

How do I stop my cursor from blinking in HTML?

You can easily do this by searching for "settings" and then clicking the "manage settings" button. Then go to the "accessibility tab" and toggle off the "navigate pages with a text cursor" option. "Navigate pages with a text cursor" is also known as Caret Browsing.

How do I get rid of the flashing cursor in my textbox?

You could set a maxlength on the textbox and then use text-indent to move the cursor back more characters than the maxlength. For example, you could set maxlength=20 and then for the text box set text-indent: -20em that way the text starts out of the box's boundaries and can't ever come into view.


2 Answers

DIV element has (other elements as well) contentEditable property that you can set in Javascript to true.

getElementById('YourDiv').contentEditable = true;
like image 172
Robert Koritnik Avatar answered Nov 15 '22 16:11

Robert Koritnik


You can make the div editable by setting its contentEditable attribute / property to true. However, for anything that is slightly more powerful or flexible then very basic editing, you might want to look at existing solutions such as:

  • TinyMCE
  • Kevin Roth's RTE
  • The YUI editor
like image 20
Daan Avatar answered Nov 15 '22 17:11

Daan