Insert text in input box in contenteditable div in

问题:

I am trying to insert text in input box which is in contenteditable div. When I click on input box, the cursor does not appear. I can insert text after double click on input box. This problem occurs in IE.

<div contenteditable="true">
   <input type="text">
</div>

https://jsfiddle.net/spgkpgdy/

Thanks.

回答1:

Hello you could try something like this hope it works 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 bit research on this and i came up with solution hope it helps.

Revised Demo: https://jsfiddle.net/spgkpgdy/9/

Refrence link: https://stackoverflow.com/a/21875990/2260060

回答2:

This issue seems to happen because IE allows you to move the input around the contenteditable div when you click on it, and need a double click to edit its content.

One possible solution is to override IE's behavior by making the input focus onmousedown. This is really simple 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 a jQuery version on this JSFiddle: http://jsfiddle.net/yuzs9rz4/4/

回答3:

The Behavior

• When you first time click on the control, the outer div is getting focused. You can change its size by dragging any white dots at its edges. This is contenteditable=true expected to do.
• When you double click on the click, the div leaves edit mode and the input control gets focused. So you are able to enter text.

Both are expected behaviors of (Microsoft) HTML document elements.

---

The Solutions

1. If you can remove the attribute, your web page will behave same in all browsers.
2. If you cannot remove the attribute, you can put a switch to toggle editable state. Here is my tiny code example:

<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 cannot remove the attribute and want to keep resize gripper around the div, you can listen the onfocus event of the outer div and set focus to inner input control.

var divElem = document.querySelector("div[contenteditable='true']");
divElem.onfocus = function() {
    divElem.querySelector('input').focus();
}