Prevent contenteditable element from getting focus when clicking parent
html,events,focus,contenteditable
I fixed it with the way I put pointer-events: none on parent element and pointer-events: all on element with content editable attribute.
How to edit contents in Angular js Smart Table
javascript,angularjs,contenteditable,smart-table
Thanks I had a look around and used the code from here http://jsfiddle.net/bonamico/cAHz7/ and merged it with my code. HTML file: <tr ng-repeat="row in place.openHours"> <td><div contentEditable="true" ng-model="row.day">{{row.day}}</div></td> <td><div contentEditable="true" ng-model="row.open">{{row.open}}</div></td> <td><div contentEditable="true" ng-model="row.close">{{row.close}}</div></td> <td> <button type="button"...
How to insert a space after insert node
javascript,wysiwyg,contenteditable
I suggest adapting insertNodeAtCaret to insert multiple nodes: function insertNodesAtCaret() { var i, len, node, sel, range, html, id; var escapeHtml = function(text) { var div = document.createElement("div"); div.appendChild( document.createTextNode(text) ); return div.innerHTML; }; if (typeof window.getSelection != "undefined") { sel = window.getSelection(); if (sel.rangeCount) { range = sel.getRangeAt(0); range.collapse(false);...
Fixed padding in contenteditable element
html,css,textarea,overflow,contenteditable
The answer to your specific question of whether a non-textarea "contenteditable" block level element's padding can behave like a textarea's is "no." There is likely a way to achieve this look by adding additional elements to your div, but the padding of your div will always behave as padding is...
Tablesorter always reloads first page after content-edit
javascript,contenteditable,tablesorter
So the problem turned out to be an issue with the pager addon/widget. When a cell is edited, an "updateCell" event is triggered by the editable widget to update the internal cache. Once this process completes, an "updateComplete" event is triggered by the core plugin. In the pager code, when...
Prevent deletion of all tags in a content editable
javascript,html5,contenteditable
This is what I have found: The erronous behavior of contenteditable lists in Opera and Chrome only occurs if the parent ul element is not followed by any other element with a minimum rendering space of 1px x 1px. The display value of the element doesn't matter, as long as...
Rearrange DOM elements according to given standard
javascript,jquery,html,html5,contenteditable
As I stated in my comment, I can't see a general solution to this, but your specific example could be solved like this. And you can easily make several other conversions based on this one. The replace function is based on this answer. // this converts an element to another...
Cursor appears above contenteditable div with placeholder and :before attribute
css,css3,contenteditable,placeholder
DEMO Disadvantage/Advantage of this solution: This solution will hide the text on focusing the element which is a disadvantage but its more or less a good thing as many peoples use javascript to hide placeholder text on input fields focus. Details: 1) Content shouldn't be a part of css, hence...
Select all contenteditable divs
javascript,jquery,contenteditable
use $(this).attr('id') instead of $(this).id
Insert text in input box in contenteditable div in IE
html,internet-explorer-11,contenteditable
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: http://stackoverflow.com/a/21875990/2260060...
CSS on :focus within child of contenteditable
Because of the limitation that elements within a contenteditable element can't generally receive focus, I suggest faking it by adding a class to your <span> element when the selection is contained within it, which you can do by monitoring the selection for changes (you'll have to use mouse and keyboard...
A plain-text & single-line contenteditable div
javascript,html,css,contenteditable
You could disable Enter key for the contentEditable element using JavaScript. Here is a jQuery version: $('[contenteditable]').keypress(function (e) { if (e.keyCode == 10 || e.keyCode == 13) { e.preventDefault(); // Submit the form, etc. } }) .on('paste keyup', function () { var _this = this; setTimeout(function () { // remove...
Contenteditable + JQuery not working
jquery,ajax,jsp,contenteditable
Hi first of in your update.jsp you have mention request.getParameter('id') but in ContenteditableTest.jsp in ajax call you have mention data : "text=" + text, so either change "text=" to "id=" in ContenteditableTest.jsp or request.getParameter('id') to request.getParameter('text') in update.jsp. And for contenteditable attribute you can follow this Post https://plus.google.com/114254873085584811912/posts/LqpzvvzoMYc...
ContentEditable element — cursor back to beginning of editable text
javascript,jquery,javascript-events,contenteditable
A working (if not particularly good) solution to this is to just reset the html of the element when it is unfocused by using element.innerHTML = element.innerHTML;. Most browsers move the cursor back to the beginning when you do this. However, this is not a good idea if you have...
Inline autocorrect with contenteditable
javascript,jquery,contenteditable
the core replace-in-node-being-typed in feature can be powered by this function: function runRep(from, to) { var sel = document.getSelection(), nd = sel.anchorNode, text = nd.textContent.slice(0, sel.focusOffset), newText = text.replace(from, to), wholeNew = nd.textContent.replace(text, newText), range = document.createRange(); nd.textContent = wholeNew; range.setStart(nd, newText.length); range.collapse(true); sel.removeAllRanges(); sel.addRange(range); nd.parentNode.focus() } usage: runRep("helo", "hello");,...
HTML 5 toggling the contenteditable attribute with javascript
javascript,if-statement,contenteditable
You've created an infinite loop here: for (i = 0;classToEdit.length; i++) { Should be: for (var i = 0; i < classToEdit.length; i++) { But, if you say classToEdit.contenteditable = true "works", you've to define "not working/is working" since the snippet doesn't definitely do what you expect it to do,...
drag and drop between lines or paragraphs in contenteditable
javascript,jquery,dom,contenteditable,content-editor
Here is the HTML code: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" /> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <div class="drop_area" contenteditable="true"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget luctus enim. Nunc varius bibendum accumsan. Donec pretium mi eget...
Firefox contenteditable cursor issue
Here's a fiddle that you might like: http://jsfiddle.net/e5gwc1gq/2/ I believe that the problem is because the :before psuedo element doesn't allow access to the underlying parent-div. The reason I think so is because if you were to replace before with after, the problem persists, but is flipped, ie, now if...
Move to the end one character with rangy
javascript,range,selection,contenteditable,rangy
You could use Rangy 1.3's TextRange module. For example, to move the caret one character forwards, you could do the following: rangy.getSelection().move("character", 1); ...
Prevent text from being erased when it is highlighted in contenteditable element
javascript,html5,contenteditable
The keyup event is too late. Do it using the keydown event instead. Also, document.bind is not the correct syntax and will throw an error. You need addEventListener() instead: document.addEventListener('keydown', function(ev) { if(ev.keyCode == 13) { //do something instead of erasing text ev.preventDefault(); } }, false); ...
`contenteditable = true` height issue in FireFox
html,css,firefox,contenteditable
workaround: [contenteditable='true']:before { content: "\feff "; } CSS2 section 10.6.3: The element's height is the distance from its top content edge to the first applicable of the following: the bottom edge of the last line box, if the box establishes a inline formatting context with one or more lines the...
white-space:pre does not work with contenteditable.
Luckily the answer was out there on this fiddle:contenteditable with white-space pre This is the CSS this person used: #editor { border: 1px solid black; height: 200px; width: 300px; white-space: pre; word-wrap: normal; overflow-x: auto; } So it needed the extra: word-wrap: normal; Thank you Rick for your help, it...
Full-height fluid Layout with editable Textfield
You may not like the answer, but the only way I know to meet all your criteria is by using a table for layout. HTML <table class="layout"> <tr class="header"> <td>Header goes here <tr> <td> <div class="container"> <div class="content"> Content goes here. </div> </div> <tr class="footer"> <td>Footer goes here </table> CSS...
Set cursor position in content-editable div
javascript,html,google-chrome,contenteditable,caret
Here's a much simpler approach. There are a few things to note: keypress is the only key event in which you can reliably detect which character has been typed. keyup and keydown won't do. The code handles the insertion of parentheses/braces manually by preventing the default action of the keypress...
Maintain undo functionality with createRange()
javascript,html5,contenteditable,undo-redo,rangy
According to this link , none of the current browsers support the UndoManager spec. You can test that in your browser by trying to access document.undoManager which undefined in Chrome
define word boundaries for HTML5 spellcheck
javascript,html,html5,contenteditable,spell-checking
The implementation of “spelling checks” requested by using the spellcheck attribute (which the question is apparently about) is heavily browser-dependent, and the HTML5 spec intentionally leaves the issue open. Browsers may implement whatever checks they like, the way they like, and they do. You cannot change this in your code....
asp.net programmatically get text inside dynamic div
javascript,asp.net,html5,contenteditable
Thanks, I was able to do it, but there was a bit more work needed. In short, I populating a asp data grid and I would like to have where the use clicks on a td (generated by the data grid), they would be able to edit the contents. I...
Get content in div to PHP variable
javascript,php,html,submit,contenteditable
Now i can think of 2 ways: as you said, writing the text from the contenteditable div to the input; and with ajax. 1.hidden input way so the workflow here is that you copy what html is inside the contenteditable div to a hidden input with javascript. when you click...
contenteditable div: capture input event, ignore paste event
javascript,html,events,contenteditable
The simplest solution would be to detect a keyboard event (keydown, keyup or keypress) instead of oninput, but which to choose, depends on what the handler actually will do. If you don't want/can't use keyboard detection, there's a back-gate. It looks like onpaste would fire before oninput (Chrome, FF). Hence...
Contenteditable with ng-model
angularjs,contenteditable,angular-directive
As per @PetrAveryanov's comment, the problem is that ng-blur fires before the model has changed (hence the strange output). ng-change, however, fires only once the model has been updated (unlike javascript's change event). S the solution was simply: <span contenteditable ng-model="person.name" ng-change="updatePersonName(person)">{{person.name}}</span> ...
contenteditable loose focus but writes anyway
javascript,jquery,google-chrome,contenteditable
Solved the issue with: $("#mycontenteditable").on("blur", function(){ var sel = document.getSelection(); sel.removeAllRanges(); }) ...
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
Ok, this appeared to fix the issue for me, albeit, this fix is a little hacky. If you set text to a blank space then it'll fix the issue. I'm hoping someone else may have a less hackerish fix. $('button').click(function(e){ $('.textarea').text(' '); $('.textarea').focus(); console.log($('.textarea')[0].innerText.length); }); And here is a fiddle...
How to save data in model using Yii2 grid with Editable column
Actually the solution is easy. I just need the id of that specific row to update that.And in my ajax post I got something like this: Flagging[0][status] NO _csrf TlhyUm5kajAoNxgVNy0/ZCoyHApZUlNUFh0rB1gRPGoAFSIdGSAifQ== editableIndex 0 editableKey 13 hasEditable 1 and found the editableKey is the id of that specific row! Now in my...
How can I properly create a contenteditable “Font Tester” type editor with CSS classes applied by JQuery?
javascript,jquery,css,fonts,contenteditable
I have solved by this way. Ugly, but works. Create changeStyle function. Add id="try" to span Click here to try it!. Add to all select combobox onchange="changeStyle()" event <script> function changeStyle(){ family= $("#font-family-select").val(); size=$("#font-size-select").val(); weight=$("#font-weight-select").val(); $("#try").removeClass().addClass("fontselect fontsize fontweight " + family + " " + size + " " +...
Append nodes to document fragment along with break tags
javascript,for-loop,contenteditable,documentfragment
When you add elements to the documentFragment, you're removing them from the DOM, which makes the collection you're iterating update and re-index. If the <br> elements are every other one, then naturally, they'll be the ones skipped because of the re-indexing. To fix it, iterate in reverse so that you're...
Custom div element (polymer) doesn't listen to contentEditable=“true”
dart,contenteditable,dart-polymer
Alternatively you could insert a (wrapping it instead of extending it) instead of "Content". In this case you wouldn't need to extend the DIV (just create a custom element which doesn't extend any other element).
How to test contenteditable field with Protractor?
javascript,protractor,contenteditable
It was my mistake. I have been selecting not the editor itself, but content inside editor. Now it works.
Setting and getting selectionrange/caret position in contenteditable div element (dart)
dart,selection,contenteditable,caret
import 'dart:html' as dom; dom.Range range; dom.DivElement editable; void main() { editable = (dom.document.querySelector('#editable') as dom.DivElement); dom.document.onSelectionChange.listen(getRange); } void getRange(dom.Event e) { if(dom.document.activeElement != editable) { return; } dom.Selection sel = dom.window.getSelection(); if(sel != null) { range = sel.getRangeAt(0); print('${range.startOffset} ${range.endOffset}'); } } ...
No scrollbar shown when element is bigger than its flexbox container
css,css3,layout,contenteditable,flexbox
You need to do the following: Add "max-height: 100%" on the <p> element to keep it from growing indefinitely. If you want to keep your padding on the <p>, you also need to set box-sizing: border-box to get its padding included in that max-height. (Technically box-sizing:padding-box is what you want,...
Pseudo element takes up space in IE9
html,internet-explorer-9,contenteditable
To make it work in IE: div:empty:before { content: 'Type here...'; color: #ccc; display: inline-block; width: 0; white-space: nowrap; } display: inline-block makes it possible to set a width. width: 0 makes sure that the element does not take up space. white-space: nowrap forces the text to be in one...
No-Javascript editable text region that saves
The only way to save content between page loads is to use a programming language to save it somewhere. What you want is not achievable with just HTML and CSS.
When Listening to Ctrl + B event, Bookmark tab shows up
javascript,jquery,html5,contenteditable
check this solution jsFiddle var g_state = 0; $(document).ready(function() { $('body').keydown( function ( eve ) { if (eve.which === 17) { eve.preventDefault(); g_state = 1; } return true; }); $('body').keyup( function ( eve ){ if (eve.which === 17) { eve.preventDefault(); g_state = 0; } return true; }); $('body').keypress( function (...
How to import ngModel into link funciton of directive
angularjs,angularjs-directive,contenteditable
Since you're "requiring" an array of controllers, you will get an array of controllers back injected into your link function. directive.link = function(scope, element, attrs, ctrls) { var ngModel = ctrls[1]; ngModel.someMethod(); } From documentation: The require takes a string name (or array of strings) of the directive(s) to pass...
Insert div or custom-directive in contenteditable div at cursor position in angularjs
javascript,jquery,html,angularjs,contenteditable
In order for Angular to be aware of your added element and do its magic, you need to $compile the element and link it to a scope. So you'll need a controller with a scope. You also need to replace the onclick handlers with ng-click and also $compile the element:...
innerHTML value of contenteditable div on modification
javascript,jquery,html,contenteditable
$('#my-div').on('keypress', function() { $('#desc').val($(this).html()); }); you need to listen to changes to the editable div and update input value i assume you use jquery if not document.getElementById('my-div').addEventListener('keypress', function(e) { document.getElementById('desc').value = this.innerHTML; }); ...
.focus() - how to put the curser at end of content using contentEditable div
javascript,jquery,contenteditable
One way is using a selection range that starts at where you want the caret to be: var sel = window.getSelection(), range = sel.getRangeAt(0); range.setStartBefore(div.children().last()[0]); sel.removeAllRanges(); sel.addRange(range); Updated fiddle: http://jsfiddle.net/techfoobar/mxtasnbL/2/...
How to focus multiple selected line in contenteditable div in jquery
jquery,html,contenteditable,execcommand
Add CSS for single line and multiple line focus the code is - $(document).ready(function() { document.execCommand('formatblock',false,'p') // for multiple line focus var selectedNodes = []; var sel = rangy.getSelection(); for (var i = 0; i < sel.rangeCount; ++i) { selectedNodes = selectedNodes.concat( sel.getRangeAt(i).getNodes() ); $(selectedNodes).css("height","40px"); } // single line focus...
Prevent contenteditable from styling text at cursor
javascript,html5,contenteditable
It's a common problem for which there is no easy solution. Inserting a zero-width space character (U+200B, for example) immediately after the <b> element is one (hacky) solution. See How to set caret/cursor position in a contenteditable div between two divs., for example.
html contentEditable document.execCommand change selected opacity
html,opacity,contenteditable,execcommand
You will have to use the styleWithCSS command, which specifies whether CSS or HTML formatting should be generated by the execCommand method into the document. Refer the specs here: https://dvcs.w3.org/hg/editing/raw-file/tip/editing.html#the-stylewithcss-command . So, in this case pass true to use the CSS styling instead of generating the font tag. Snippet: function...
How can you drop an image from your desktop into an editor and move it around?
javascript,html5,contenteditable
You can set the caret from your mouse position. See Text selection in div(contenteditable) when double click Didn't try it on IE, but this seems to work on Chrome/Firefox: function userDidDrop(event) { event.preventDefault(); if (document.caretRangeFromPoint) { //Chrome range = document.caretRangeFromPoint(event.clientX, event.clientY); } else if (document.caretPositionFromPoint) {//Firefox rangePos = document.caretPositionFromPoint(event.clientX, event.clientY);...
Automatic text detection on contenteditable div using angular js
html,angularjs,angularjs-directive,wysiwyg,contenteditable
Here is a demo plunker: http://plnkr.co/edit/GKYxXiDKv7fBeaE7rrZA?p=preview Service: app.factory('interpolator', function(){ var dict = { .... }; return function(str){ return (str || "").replace(/\{\{([^\}]+)\}\}/g, function(all, match){ return dict[match.trim().toLowerCase()] || all; }); }; }); Directive: app.directive('edit',[ 'interpolator', function(interpolator){ return { restrict: 'A', require: 'ngModel', link: function(scope, element, attrs, ngModel) { element.on('blur', function(e) { scope.$apply(function()...
'Selecting' an image inside an editable div
jquery,css,contenteditable,text-editor,rich-text-editor
Well i made a very simple example, first select the image and then press del. Hope it helps. http://jsfiddle.net/vbbay6jc/2/ var seleccionado; $(".temp-image").on('click', function(){ seleccionado = this; }); $('#newupdate-text-1').keyup(function(e){ if(e.keyCode == 46){ $(seleccionado).remove(); } }) You could add a class to see what is selected in the screen....
How to add class or id or CSS style in execCommand formatBlock 'p' tag?
jquery,html,contenteditable,execcommand
If you want to add id or class for CSS in content editable div, then you will use below code--- <script> function CssFnctn() { document.execCommand('formatblock', false, 'p') var listId = window.getSelection().focusNode.parentNode; $(listId).addClass("oder2"); } </script> .oder2 { padding-left: 3em; } ...
How to dynamically change the line height of each line in content editable div in php jquery?
javascript,html,css,contenteditable
This is work for me. So try this may be it will be also helpful for you.(single and multiple node). <script> var selectedElement = null; function singleline() { document.execCommand('formatblock', false, 'p') var selectedNodes = []; var sel = rangy.getSelection(); for (var i = 0; i < sel.rangeCount; i++) { selectedNodes...
Is there a way to not lose focus selection when replacing HTML with text in an contenteditable div?
javascript,jquery,contenteditable
When you change the DOM nodes inside your editable div, any range exists within or partially within that div has to change to accommodate the changes. If you completely replace the content, as your code does, the nodes that the range's boundaries were relative to are destroyed and the range...
Is it safe (cross-browser) to omit the value of the contenteditable attribute?
As per the W3C specs: In the following example, the disabled attribute is given with the empty attribute syntax: <input disabled> Note that empty attribute syntax is exactly equivalent to specifying the empty string as the value for the attribute, as in the following example. <input disabled=""> Now, that's what...
ContentEditable section posting to PHP
You can try this Get that section's text using jquery and store it in a hidden input type=text and submit that form....
Allowing contenteditable to undo after dom modification
javascript,html,contenteditable
You can ensure undo-ability of your edit operations by doing them via document.execCommand() instead of direct DOM manipulations. Check this mini demo that shows the bold command (undoable ofcourse): http://jsfiddle.net/qL6Lpy0c/...
Why Is My Contenteditable Cursor Jumping to the End in Chrome?
javascript,html,google-chrome,contenteditable
I don't know why this happens, but I had the feeling it has something to do with the sizing of the <div>, so I tried playing with the display property. After setting it to inline-block and playing a little with the text I found that the issue is gone after...
Allow SVG Text to be editable in Angular?
javascript,angularjs,svg,angularjs-directive,contenteditable
I wrote a directive: http://jsfiddle.net/michaschwab/68dtgcu3/1/ Instead of eg <text x="20" y="70" fill="red">{{foo}}</text> you use these extra tags: <text x="20" y="70" fill="red" ng-model="foo" content-editable>{{foo}}</text> That will automatically add a contentEditable div right on top of your Text node so you can't see it. Changing that new div will allow you to...
How to blur a table cell within content editable
javascript,jquery,focus,contenteditable,blur
Yes, the problem with blur event. Instead of relying on it try to bind click event on document and prevent it from bubbling in case if click occurred on TD: $(document).on('click', 'td, th', function (event) { $('#selectedCell').removeAttr('id'); $(this).attr('id', 'selectedCell'); event.stopPropagation(); }); $(document).on('click', function (event) { $('#selectedCell').removeAttr('id'); }); Demo: http://jsfiddle.net/5c7br6zc/1/...
Working with contenteditable
javascript,css,html5,contenteditable,caret
Here's a method using Selection and Range. MDN Selection MDN Range (If you check out MDN, you'll notice that IE9 support isn't there - prior to IE9, you had to use proprietary IE script. Google can help you out there!) First thing I do is add these two variables: var...
div contentEditable but Readonly
You can prevent the user from cutting by handling the "cut" event and calling its preventDefault() method. This will prevent cut with any user input (including the browser's context menu or edit menu), not just via a particular key combination. This example uses jQuery because your jsFiddle uses it: $("#editablediv").on("cut",...
Skipping an element in CKEditor
javascript,ckeditor,contenteditable
Important thing is that CKEditor is not responsible for caret movements. At least this is true in most cases, because there are some where it takes matters in its own hands. In all other cases it's your browser what moves the caret so you would need to alter its behaviour....
“Angular Way” to trigger contenteditable control from a controller?
javascript,jquery,angularjs,contenteditable
To my knowledge, there is no better/shorter way to let users edit an element right away without triggering focus, so I would work on improving what you have to meet Angular's application design principles. According to the "Angular Way", DOM manipulation must happen within a directive, business logic should be...
Using :focus with nested contenteditable elements
In the end, I added a wrapper element around the spans that cannot be contenteditable. This makes the focus work correctly. <div contenteditable> <span contenteditable="false"> <span contenteditable class="focus">content</span> </span> </div> I don't like this solution very much, but I also don't want to add a lot of javascript to this....
Replace specific word in contenteditable
javascript,jquery,range,contenteditable
To work with Ranges we need to keep in mind that we are working with Nodes, not only the text that is rendered. The structure you want to manipulate is: <div id="divTest" contenteditable="true"> <-- Element Node "some text" <-- TextNode </div> But it also could be: <div id="divTest" contenteditable="true"> <--...