Paste text into input field in contenteditable div in IE
I am trying to insert text into an input field that is in a contenteditable
div. When I click on the input field, no cursor appears. I can insert text after double click on the input field. This issue occurs in IE.
<div contenteditable="true">
<input type="text">
</div>
https://jsfiddle.net/spgkpgdy/
Thank.
source to share
Hello you can try something like this hope it will work for you.
function controlselectHandler(evt) {
evt.preventDefault();
}
document.body.addEventListener('mscontrolselect', controlselectHandler);
$('#abc').on('click','input[type="text"]',function(e){
$(this).focus();
})
I did a little bit of work on this and I came up with a solution that it can help on.
Revised demo: https://jsfiddle.net/spgkpgdy/9/
Refrence link: fooobar.com/questions/238774 / ...
source to share
Behavior
- When you first click on the control, the outer div becomes focused. You can resize it by dragging any white dots around the edges. It is expected to be
contenteditable=true
. - When you double-click on the click, the div goes into edit mode and the input control is focused. This way you can enter text.
Both expected behaviors of elements in an HTML document (Microsoft).
Solutions
- If you can remove the attribute, your web page will behave the same across all browsers.
- If you cannot remove an attribute, you can set a radio button to toggle the editable state. Here's my example with a little code:
<div id="ctrl" contenteditable="true">
<input type="text" />
</div>
<div id="buttonGroup">
<span>This affects to MSIE only</span>
<button onclick="document.getElementById('ctrl').contentEditable='false'">Disable editable</button>
<button onclick="document.getElementById('ctrl').contentEditable='true'">Enable editable</button>
</div>
Update 1:
If you are unable to remove the attribute and want to keep the capture size around the div, you can listen for the onfocus event of the outer div and set focus to the inner input control.
var divElem = document.querySelector("div[contenteditable='true']");
divElem.onfocus = function() {
divElem.querySelector('input').focus();
}
source to share
This problem seems to be happening because IE allows input to move around the contenteditable div
when you click on it and you have to double-click to edit its content.
One possible solution is to override IE's behavior by making input focus onmousedown
. It's very easy to do:
document.querySelector("div[contenteditable='true'] input").onmousedown = function() {
this.focus();
}
<div contenteditable="true">
<input type="text" />
</div>
You can see this JS solution and jQuery version on this JSFiddle: http://jsfiddle.net/yuzs9rz4/4/
source to share