3

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.

cr0ss
  • 877
  • 5
  • 20
Prashant16
  • 1,514
  • 3
  • 18
  • 39
  • 1
    Can you share more of your HTML? Is this within a form element? or another div for example? – SierraOscar Apr 27 '15 at 12:43
  • This looks interesting. It seems like IE gives you the option to select the textbox in order to delete it/move it around the contenteditable (which kinds of make sense). Maybe one option would be to check the events and if the textbox was clicked, focus it so it can be edited (but it seems that that's not the default behavior on IE) – Alvaro Montoro Apr 27 '15 at 13:05
  • Kindly try attaching events directly with input control: – Tanul Apr 27 '15 at 13:35

3 Answers3

3

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

Community
  • 1
  • 1
Akshay
  • 1,344
  • 11
  • 17
  • This solution has several issues: the `input` would focus even when it was not clicked on at all (try double clicking anywhere in the contenteditable that is not the `input`); and also, even if the double click happened on the `input`, if the page has more than one `input` elements (inside or outside of the contenteditable), the last one would focus and not the one that was clicked on (see https://jsfiddle.net/spgkpgdy/5/). It would be better to do `$(this).find("input").focus()`, although that would still have problems if the contenteditable had more than one `input` in it – Alvaro Montoro Apr 27 '15 at 14:45
  • I got your point i have just updated the code could you check and let me know. :) – Akshay Apr 27 '15 at 15:54
1

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();
}
stanleyxu2005
  • 8,081
  • 14
  • 59
  • 94
1

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/

Alvaro Montoro
  • 28,081
  • 7
  • 57
  • 86
  • As a comment, overriding the browser's default behavior is not always a good idea, as users may find the experience awkward. In this case, I'd recommend to at least re-style the `input` inside the contenteditable, because by default IE shows the `move` cursor and that can be confusing (change its cursor to `text` so it will be more intuitive what action will happen when clicking on the `input`) – Alvaro Montoro Apr 27 '15 at 13:38
  • In most case, users will use a mouse, but sometimes they might use keyboard or touch device. So I think listen to `onfocus` instead of `onmousedown` (of the outer `div`) might be better. – stanleyxu2005 Apr 29 '15 at 14:11
  • @stanleyxu2005 You are right, keyboard users will still experience the undesired behavior with this solution. But using `onfocus` doesn't work for mouse users (I tried it, same with `onclick` and `ontouchstart`). The problem is precisely that the input doesn't get focused when selecting/clicking on it, so adding the code `onfocus` does not help. – Alvaro Montoro Apr 29 '15 at 14:21
  • Just saw you updated the comment. I will try using `onfocus` of the outer `div`. But I can imagine that then I'd have trouble figuring out if the `input` was selected or which `input` (in case there are multiple) – Alvaro Montoro Apr 29 '15 at 14:24
  • We can specify which input control to be focused programmatically. Anyway your solution is indeed a smart technique. Good to know. Have a good day. – stanleyxu2005 Apr 29 '15 at 14:31
  • @stanleyxu2005 I just ran the check with [that recommendation](http://jsfiddle.net/4u9bew8g), but it has the issues that I said: it doesn't matter where you click, the input will be selected ([now it's impossible to edit the rest of the contenteditable](http://jsfiddle.net/4u9bew8g/1/)); Also, if there are multiple `input`s, [IE always selects the first one even if you click on a different one](http://jsfiddle.net/4u9bew8g/2/). It would require additional coding to fix that, but I'll look into it later. Thanks for noting the keyboard issue, now I have a challenge :) – Alvaro Montoro Apr 29 '15 at 14:31
  • You're right. I agree with you. Let's wait for the questioner's response. I dont really understand his needs. If he wants the input control can be focused, the most intuitive way I can imagine is to remove the `contenteditable` attribute. – stanleyxu2005 Apr 29 '15 at 14:37