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.
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"...
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);...
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...
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...
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...
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...
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...
javascript,jquery,contenteditable
use $(this).attr('id') instead of $(this).id
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...
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...
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...
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...
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...
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");,...
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,...
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...
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...
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); ...
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); ...
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...
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...
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...
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...
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
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....
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...
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...
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...
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> ...
javascript,jquery,google-chrome,contenteditable
Solved the issue with: $("#mycontenteditable").on("blur", function(){ var sel = document.getSelection(); sel.removeAllRanges(); }) ...
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...
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...
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 + " " +...
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...
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).
javascript,protractor,contenteditable
It was my mistake. I have been selecting not the editor itself, but content inside editor. Now it works.
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}'); } } ...
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,...
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...
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.
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 (...
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...
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:...
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; }); ...
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/...
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...
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,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...
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);...
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()...
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....
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; } ...
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...
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...
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...
You can try this Get that section's text using jquery and store it in a hidden input type=text and submit that form....
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/...
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...
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...
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/...
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...
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",...
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....
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...
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....
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"> <--...