1

I'm trying to make a simple editable list using contenteditable, turns out it's more difficult than I first assumed. Here's the simplest example to demonstrate the problem.

<p contenteditable>
    <span>1</span>
    <input type="button" disabled="disabled" value=","/>
    <span>2</span>
    <input type="button" disabled="disabled" value=","/>
</p>

http://jsfiddle.net/dsmwfxj3/

If you focus the <p> tag, you can use the arrow keys to move from the start to just before the last comma. Using the mouse you can click after the last comma and it'll gain focus correctly, although the cursor is invisible (until you enter something that is).

Ideally I'd like to be able to use the arrow keys to access after the last comma and/or be able to see the cursor at that point. I have a feeling they're connected in some way. Anyone experience this problem before?

I'm testing in Firefox v35.0.1 at the moment. It's working (just about) as desired in Chrome, IE & Safari at this stage.

PS. I'm using the disabled input trick suggested here to get around the contenteditable="false" bug.

Alex Latchford
  • 655
  • 1
  • 9
  • 17

1 Answers1

1

I know this is a bit old but this is an old bug in FireFox. Looks like it was first reported in 2010. It hasn't been resolved yet.

See: https://bugzilla.mozilla.org/show_bug.cgi?id=579760

Jeremiah
  • 11
  • 1