contenteditable

问题 I am working on a website where I would like to be able to display a box containing syntax-highlighted source code for the user to copy. When I click on the box, giving it focus (Chrome shows its focus outline), and type Ctrl+A , the text of the entire page is selected, whereas I would like only the syntax-highlighted source code within the box to be selected. Is it possible to restrict the range of select all/ Ctrl+A to only the text within the box, preferably without using an <iframe>? My

问题 I'm having a strange issue... This works in chrome as expected but in safari it only gets .. glowing but doesn't react on key input.. this is the method that fires the text edition: var namebloc = $(event.currentTarget).find('.column_filename'); var oldvalue = namebloc.html(); namebloc.attr('contentEditable', true).focus(); document.execCommand('selectAll',false,null); namebloc.blur(function() { $(this).attr('contentEditable', false).unbind( "keydown" ).unbind( "blur" ); var newvalue = $(this

问题 This question already has answers here : Limiting Number of Characters in a ContentEditable div (12 answers) Closed 5 years ago . Hi I am trying to limit text in contenteditable="true" div: var char = 500; $("#counter").append("You have <strong>" + char + "</strong> chars left."); $("#editor").keypress(function () { if ($(this).text().length > char) { $(this).text($(this).text().substr(1)); } var rest = char - $(this).text().length; $("#counter").html("You have <strong>" + rest + "</strong>

问题 I am trying to set the cursor to the end of next/prev contenteditable tag if the current one is empty, but when I set focus it adds focus to the begining of the text and not end Tried almost all solution on SO but none seemed to work for me. Here the simple code I am trying HTML CODE <div id = 'main'> <div id = 'n1' contenteditable=true> Content one</div> <div id = 'n2' contenteditable=true> Content 2</div> <div id = 'n3' contenteditable=true> Content 3</div> <div id = 'n4' contenteditable

问题 I have a contenteditable div <div id="divTest" contenteditable="true"> I need to get the last word from caret position and on certain condition I have to test and remove this specific word only. Below is how am I doing $('#divTest').on('keyup focus', function (e) { if (e.keyCode == 32) { var lastWord = getWordPrecedingCaret(this), spanLastWord = $('#lastWord'); } }); function getWordPrecedingCaret(containerEl) { var preceding = "", sel, range, precedingRange; if (window.getSelection) { sel =

问题 I am making use of a contenteditable div in combination with the rangy Javascript library to insert HTML at the cursor position. End of the day the contents of the div commonly looks like: <div contenteditable="true"> "Hello " <button contenteditable="false" data-id="147">@John Smith</button> " " </div> Users get suggested upon pressing '@' and get subsequently inserted as a button when selected (ala Google Plus). I also insert a   after this button. The button gets removed in Chrome/Safari

问题 I have a div with the attribute contentEditable set. This allows me to have a free-form editable textarea, without the need for any form input fields: http://jsfiddle.net/M8wx9/8/ However, when I create a couple of new lines and click save button, I grab the content with the .text() method which goes on to remove the line feeds I just entered. I need to maintain the newline characters if at all possible and store the content as plain text in the database. I could store the HTML directly to

问题 This question already has answers here : Insert text at cursor in a content editable div (4 answers) Closed 2 years ago . I'm trying to make a contenteditable that only accepts plain text. What I want is to listen to paste event and then remove all html and paste it on the contenteditable only as plain text. In order to do that I've already tried two different approachs, based answers to similar questions, but those two approachs have problems. First: This one isn't using "paste" listener, is

问题 Is there a way ( except Rangy library ) to change contentEditable Div InnerHTML on the fly, like on keyup, with no cursor position / focus lose? I'd like to use pure javascript code, as simple as it is possible. for example : <div id="divId" contentEditable="true" onkeyup="change(this)"></div> then javascript : function change(element) { element.innerHTML = element.innerHTML.replace(/.../, '...'); } Thanks. 回答1: If you're replacing the HTML, you will need some means of saving and restoring

问题 Is there a way ( except Rangy library ) to change contentEditable Div InnerHTML on the fly, like on keyup, with no cursor position / focus lose? I'd like to use pure javascript code, as simple as it is possible. for example : <div id="divId" contentEditable="true" onkeyup="change(this)"></div> then javascript : function change(element) { element.innerHTML = element.innerHTML.replace(/.../, '...'); } Thanks. 回答1: If you're replacing the HTML, you will need some means of saving and restoring