CODEWITHSUNDEEP
jquerycss
Nrc
Nrc

Reputation: 9787

Cursor in contenteditable: size and position

The cursor in an empty contenteditable div has a estrange behavior. In Safari and Firefox it is too big and it is out of its place. It works well in Chrome. I could not check in ie.

I know I could solve it if I delete the padding and/or inline-block. But I need these features.

First of all, I would like to understand why this happen, then if there is any way to solve it (to have the cursor the same size and position than the letters inside the div)

$(function(){
	$(".note").focus();	 
})
.note {
	width:200px;
	text-align:left;
	outline:none;
	padding:10px; 
	display:inline-block;
	background:lightGrey;
	
	font-size:14px;
	cursor:text;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="note" contenteditable="true"></div>

Upvotes: 2

Views: 1507

Answers (1)

Alexander Dayan
Alexander Dayan

Reputation: 2924

As far as I remember, I faced that problem on Firefox when writing WYSIWYG editors. If you write something, then select all content (press Ctlr+a) and delete it the problem disappears. If you will check the editor content after this operation you found a <br> tag. The below workaround uses this fact and just put it initially:

$(function(){
	$(".note").focus();	 
})
.note {
	width:200px;
	text-align:left;
	outline:none;
	padding:10px; 
	display:inline-block;
	background:lightGrey;
	
	font-size:14px;
	cursor:text;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="note" contenteditable="true"><br></div>

Upvotes: 3

Related Questions