Menu
  • HOME
  • TAGS

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

    css,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

    firefox,contenteditable

    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.

    contenteditable,pre

    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

    html,css,contenteditable

    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

    ajax,contenteditable,yii2

    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

    html,css,text,contenteditable

    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?

    html5,contenteditable

    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

    php,html5,contenteditable

    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

    html,contenteditable,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

    html,css,contenteditable

    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"> <--...