contenteditable

问题 I have the following: http://jsfiddle.net/mb76koj3/. [contentEditable=true]:empty::before{ content:attr(data-ph); color: #CCC; text-align: center; } h1 { text-align: center; } <h1 contenteditable="true" data-ph="Name"></h1> The problem is the <h1> is centered, but the placeholder caret isn't centered (until you start typing). The caret is on the left side, how can I change this? 回答1: Not an ideal solution but we can fake the effect by applying a padding-left of 50% to the :empty element to

问题 why won't the cursor enter some of my divs when contenteditable is enabled? also, why does my browser tell me there is nothing in the div when there is clearly a space character in it?! var div = '<div> </div>'; div.innerHTML = undefined What gives? 回答1: contenteditable does not apply to empty elements, so you may want to insert a non-breaking-space character into the empty elements you want to be able to edit the non-breaking-space " " will act as a character when left on its own, whereas a

问题 I need to set the cursor at a specific character offset. In the example below, I'd want to, for example, set it between the "a" and the "b". <ul contenteditable = true > <li id = "test">abcdef</li> </ul> I asked before and got this fiddle: http://jsfiddle.net/5a9uD/1/ That worked great for the given example and for what I needed it for then. But it does not work with this example: http://jsfiddle.net/mdwWN/ It gets an IndexSizeError at range = sel.getRangeAt(0); 回答1: You just have to pass

问题 I have table with many textarea 's (already changed to div 's with attribute contentEditable ), also with CSS I done that the innerHTML is centered horizontally and also vertically. Everything is working fine, just one thing is not OK - when you enter div , so its focused, the cursor is in the left top corner, but when you start writting its moved to the center. How can I do, that when you focus the div , the cursor will be right in the center? See demo here Thanks a lot. EDITED: Sorry, my

问题 I have a contenteditable div and I need to get the x and y position in pixels of the current selection (i.e. of the caret). What I have now is a method which gets the selection relative to the window i.e. window.getSelection() . What I found are methods which return the position in offsets relative to the div node. Do you have any ideas about this or maybe a plugin? I found plugins that return cursor positions relative to a text area but unfortunately not for a content editable div. Here is

问题 In the forum post "How to make jquery autocomplete to work for a contenteditable DIV instead of just INPUT, TEXTAREA fields." we see how to get autocomplete working on a contenteditable div element, however combined with datepicker the datepicker simply does not populate the input field. As you can see in this jsFiddle demo: http://jsfiddle.net/xvnaA/ Anyone have any wise ideas on how to fix this? 回答1: Instead of just overriding $.fn.val you could redefine it like this: (function ($) { var

问题 I have a situation where I have inline contenteditable span tags together with other non-contenteditable tags which work fine in all browsers except for IE. In IE the tags fail to act as inline and start forcibly aligning themselves as block (sort of). I need something to make them act as inline. It seems that IE is forcing some weird behaviour when the tag is contentedtiable. <div class="container"> <span class="text" contenteditable="true">Lorem ipsum dolor </span> <span class="tag">Tag<

问题 There are several questions about asking how to make a div editable. However one could just use a textarea or input field and make those disabled or readonly. I would guess this would yield better semantics. Even the example given at MDN looks like a plain old input field to me. So why would I use an editable div? What are its advantages over textareas and input fields? I just had a look at an example I found in the tag wiki contenteditable. Is the advantage, that I can use markup inside an

问题 I can't find any relevant information about "contenteditable" HTML5 parameter. I've found out, that Google Plus is using this for Chrome browsers: <div contenteditable="plaintext-only"></div> It seems that no other browsers support this and it's only Chrome proprietary value. I want to use it in my project. However, I need to detect the browser and find out if supports "plaintext-only" setting. Of course, I could detect only Chrome, but there might be other browsers that support it (I don't

问题 I have a table as shown below ╔═════╦═════╦═════╦═════╗ ║ A ║ B ║ C ║ D ║ ╠═════╬═════╬═════╬═════╣ ║ abc ║ pqr ║ XYZ ║ RSY ║ ╚═════╩═════╩═════╩═════╝ Now, In this table, I am using a content-editable of HTML5 for the column B . With this, I am able to edit the contents of the column B . Now, Here when I edit this, Is there any way through I will get to know which row has been edited and the value of a column An as well like, suppose I have edited pqr -> aaa then It should be like ╔═════╦═══