FAQ Database Discussion Community


No-Javascript editable text region that saves

html,css,text,contenteditable
I want to create an editable text region that will stay after you reload a page, (creating a notes section) but for the project I am working on I am limited to only HTML and CSS. I have tried these, but when I reopen the page the text reverts back...

Allowing contenteditable to undo after dom modification

javascript,html,contenteditable
Is there a way to modify a contenteditable's elements using javascript so that undo still works? Hallo appears to be able to do this fine, try clicking the bold button after selecting some text, I grepped through it's source and have no idea how they do it, the only mention...

ContentEditable section posting to PHP

php,html5,contenteditable
I am working on a project where I need to use a section where the content editable is set to true. The data within the section needs to be posted to PHP. What I am doing is when the user presses submit instead of it posting, it will instead call...

div contentEditable but Readonly

html,contenteditable,readonly
I have a div with some text and I want when the cursor is hover this div to select the text. If I let this div as it is, when trying to select all (CTRL+A) then I select all page content, meaning all body text. To get rid of this,...

When Listening to Ctrl + B event, Bookmark tab shows up

javascript,jquery,html5,contenteditable
I am trying to implement Ctrl+b for a contenteditable div which should make the text bold. The only problem I'm getting is that when ctrl+b is pressed, browser's bookmark tab appears. (fiddle) $(document).ready(function() { $('#editable').designMode = 'on'; $('#editable').on('keyup', function(e) { console.log(e.which); if(e.which == 66 && e.ctrlKey) { e.preventDefault(); console.log('bold'); document.execCommand...

Inline autocorrect with contenteditable

javascript,jquery,contenteditable
Is it possible to make something like the autocorrect feature in iOS for contenteditable fields? As the user types, spelling would be checked (I already have this part), but then I need a way to correct the word. I could replace the whole html of the contenteditable, but then cursor...

Contenteditable with ng-model

angularjs,contenteditable,angular-directive
I am using a contenteditable directive (code out of this discussion: https://github.com/angular/angular.js/issues/528) to allow my model to be updated. I want to update on the backend as well though (I'm using ngResource). My template is loops through person in people and for each person: <span contenteditable ng-model="person.name" ng-blur="updatePersonName(person)">{{person.name}}</span> I would...

white-space:pre does not work with contenteditable.

contenteditable,pre
Hi I am trying to prevent a contenteditable div from word wrapping. The white-space: pre property does not work for a contenteditable. This is the css: .preDiv{ border:1px solid blue; overflow:auto; width:100px; white-space:pre; } Here is a fiddle:contentEditable-fiddle I want it to work the way it does as if it...

A plain-text & single-line contenteditable div

javascript,html,css,contenteditable
I am trying to make a “single-line” and “plain-text” contenteditable div. In other words, I just want to make a <input type="text">, but not present in this form. How can I use the form of contenteditable div to present the form of <input type="text">?

Pseudo element takes up space in IE9

html,internet-explorer-9,contenteditable
I have a div that I want to behave like an text input field. Here's the full source code example: HTML: <div contenteditable='true'></div> CSS: div:empty:before { content: 'Type here...'; color: #ccc; } div{ padding: 4px; border: 1px solid #ccc; } See the fiddle in IE9: http://jsfiddle.net/87m23r5q/2/ In IE9, the problem...

How to edit contents in Angular js Smart Table

javascript,angularjs,contenteditable,smart-table
I am quite new to java script, so I must apologise if this seems basic. How can I edit rows tables in Smart-Table with Angularjs? There doesn't seem to be a tutorial with the new Smart-Table. I would like to create a simple form for users to enter the hours...

Rearrange DOM elements according to given standard

javascript,jquery,html,html5,contenteditable
I will try do describe the issue: I'm using contenteditable to edit text in DIV. The standard for elements I need to have in that DIV is: paragraph: <p style="someStyles"><span style="someStyles">TEXT GOES HERE</span></p> empty line: <p style="someStyles"><span style="someStyles"><br></span></p> Due to some user text manipulations like copy/paste standard is messed in...

Custom div element (polymer) doesn't listen to contentEditable=“true”

dart,contenteditable,dart-polymer
I have the following code. The problem is that I can't edit the content of the div. The div does look like a contenteditable div, but it doesn't work like it. I can't actually edit any of the text. Did I make a mistake somewhere ? <!DOCTYPE html> <link rel="import"...

ContentEditable element — cursor back to beginning of editable text

javascript,jquery,javascript-events,contenteditable
I have a contentEditable header. It only allows for one line and doesn't show overflow, so it stays in a specified space on the page, as such: <h2 id="element" contentEditable="true"></h2> #element { white-space: nowrap; overflow: hidden; } The user can then edit the text and make it as long as...

How to test contenteditable field with Protractor?

javascript,protractor,contenteditable
I have WYSIWYG editor on my page. I would like to test saving text in this editor with protractor. It looks like standard sendKeys does not work. Currently I'm getting an error: UnknownError: unknown error: cannot focus element What should I do in this case? Error output: UnknownError: unknown error:...

How can you drop an image from your desktop into an editor and move it around?

javascript,html5,contenteditable
The default behavior when you drop something from your desktop to a textarea is that you will see the path to the image at the position where you dropped it. My end goal is to convert the local image as base64 and insert it at the drop position within the...

CSS on :focus within child of contenteditable

css,contenteditable
I am trying to detect focus on a child element of a contenteditable element, for the purposes of pure CSS styling. (I know I could detect this with JS, add an extra class and do it that way, but that is so long-winded.) Basically, I have something along the lines...

contenteditable div: capture input event, ignore paste event

javascript,html,events,contenteditable
I'm trying to build a shortcut expander, so when a user types a certain sequence of characters, it's replaced with some longer sentence. I'm currently using 'input' event to capture contenteditable changes. The issue is, pasting also triggers the 'input' event. I only want the event to fire when user...

How to blur a table cell within content editable

javascript,jquery,focus,contenteditable,blur
I have a simple table within a content editable div like so: <div contenteditable="true"> <table class="rwd-table" width="100%"> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table> </div> When you click a cell, I'm using jQuery to add an ID to that cell. The ID has CSS applied to highlight it. $(document).on('click', 'td,...

Select all contenteditable divs

javascript,jquery,contenteditable
I'm trying to select all contenteditable div and change some of this functions: $("div[contenteditable='true']").each(function() { console.log($(this).id); $(this).onblur="onDivBlur(this)" ; $(this).onmouseup="saveSelection()" ; $(this).onkeyup="saveSelection(this)" ; $(this).onfocus="restoreSelection(this)"; }); What am I doing wrong? http://jsfiddle.net/mondayguy/oc2ooLto/ Can you also please provide me example of doing the same in pure js? Thanks....

Move to the end one character with rangy

javascript,range,selection,contenteditable,rangy
I have a contenteditable div, I want to move the range just one character after the current one. I currently want to check if the character after caret is a certain character, and if it is then place caret after it I use this code but it don't work placeCaretAfterHiddenCharacter:function(containerEl,afterCharacters)...

Tablesorter always reloads first page after content-edit

javascript,contenteditable,tablesorter
I have an application with a tablesorter implementation. It features content-editable, filtering and ajax server pager. All is working fine, except for a single issue: every time a user submit an edited value while on a page > 1, the content is submitted but tablesorter reloads the first page. Looking...

asp.net programmatically get text inside dynamic div

javascript,asp.net,html5,contenteditable
I'm trying to get the text of a div on creating dynamically in asp. below is an example of the html table created by my datagrid: <table border="1" id="MainContent_dgValues" style="border-collapse:collapse;"> <tbody><tr> <td>Date Modified<td>Comment</td><td></td> </tr><tr> <td>3/26/2000</td><td id="myEdit" onclick="makeEditable()">My Text</td><td><a...

How to insert a space after insert node

javascript,wysiwyg,contenteditable
I want to insert a space after insert a node, the problem is the space that I insert is inside a node, not after the a node. I have other solution, which is inserting a span and putting a space into the span node, but i think it should have...

Prevent text from being erased when it is highlighted in contenteditable element

javascript,html5,contenteditable
In a contenteditable h1 tag I am trying to have an event fire when text is highlighted and you press enter WITHOUT the text being erased and a a new line being inserted. I'm trying to achieve this with the following javascript: document.bind('keyup', function(ev) { if(ev.keyCode == 13) { //do...

Insert text in input box in contenteditable div in IE

html,internet-explorer-11,contenteditable
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....

Get content in div to PHP variable

javascript,php,html,submit,contenteditable
I'm using a div with contenteditable="true" as an input field, and now I'm looking for a way to pass the content of the div to a PHP variable in order to be able to save it in a .txt file. I've been looking around for solutions, and the only suggestion...

Using :focus with nested contenteditable elements

html,css,contenteditable
I am trying to make an application to edit documents using contenteditable. I would like to apply a :focus state to an element, like this: .focus:focus { color: red; } However, this doesn't appear to work when the element is nested in another contenteditable element. If I have some html...

The cursor in an editable div with a placeholder does not appears at the good place in Google Chrome

jquery,html,css,google-chrome,contenteditable
I have a button that clear a simple editable div with a placeholder. If I enter two lines (line break by pressing enter) in the editable div before pressing the button, the placeholder will appear but the cursor will be placed next to the editable div, in Google Chrome. I...

Setting and getting selectionrange/caret position in contenteditable div element (dart)

dart,selection,contenteditable,caret
I'm trying to swith from using a textarea element for my editor to a <div contenteditable="true"></div> element. I have only one problem that is that I can't use textarea.selectionStart, textarea.selectionEnd, textarea.setSelectionRange() anymore. Are there any method to get and set the selection range for a div element in dart ?...

Skipping an element in CKEditor

javascript,ckeditor,contenteditable
Let's say we have the following text and caret position: foo |bar baz and the HTML code is foo <span>bar</span> baz and user pressed the right arrow key. What happens is that the caret now moved inside of the span between the letters b and a of bar. I would...