I'm trying to make a simple rich text editor, and I'm getting stuck at the stupidest thing. For the bold buttons, instead of having a button, I'm trying to make it so that, near the top of the screen, there are several spans, and each one has a thing you can do to the text, such as bold, italic, underline, etc, and when you click on one I want it to toggle if the selected text in the contenteditable div is bold, italic, or underline. Basically, instead of buttons, I want to simply click on a span to toggle those things.
So I put a whole bunch of spans in the right place and put event handlers on them that did the appropriate execCommand. However, when the user clicks on the spans, it cancels the selection in the contenteditable div, so that the execCommand doesn't do anything. I tried setting the css user-select to none (I also used prefixes), cancelling the selectstart event, cancelling the click event, but it still cancels the selection when I click on it
You can see the jsfiddle here
I don't want to use a button instead of a span or anything. I don't want to do it in a hacky way (such as copying the selection on input, and then recreating the selection after the click) either
There's a few ways to achieve this. You can prevent the default mousedown behaviour like below:
document.getElementById('bold').addEventListener('mousedown', function (e) {
e.preventDefault();
});
FIDDLE
You can also just use the semantically correct elements such as <button> rather than <span>. If you do not like the way <button> element looks by default just re-style it.
FIDDLE
Related
I have a div that the contenteditable attribute is true,
<div tabindex="1" id="editor" contenteditable="true"></div>
I have another div that acts like a button
<div>Click Me</div>
The problem am having is that after typing inside the editor box, I selected some text and when I clicked on the "click me" div the editor box looses focus and thus removing the highlighted text.
I used in js to programmatically send the focus back
document.getElementById("editor").focus()
But after this the selected text is no more selected the cusor just moves to the beginning of the editor box.
How do I get the focus to make sure the initial selected text is selected again after the click me has been clicked
One solution is setting user-select: none on your button-like div. If the browsers you care about support it, it's the simplest (but as discussed in the comments here, someone reported problems with getting it to work in Safari...)
Otherwise you'll have to save and restore the selection using JS, the text range module of rangy.js is useful for that. Check out https://stackoverflow.com/a/57546051/1026 for a usage example; in your case you'll need to save the selection onblur and restore it after processing the click on the button-like div.
I am fighting this issue for a while now and all my searches leads to use preventDefault() in my onmousedown listener (to prevent text selection), but when I do so, it is also disabling my dragging (can't drag elements even if they have the draggable="true" attribute).
what is the best way to allow dragging elements (using the attribute draggable="true") and when dragging them and hovering with the mouse over some text (p, h1 ,h2...) prevent the text background form being blue (you know - the default when clicking and marking text)
Thanks.
Jim.
Found the solution.
Just add onmousedown="mouseDown()" to your element and this method:
function mouseDown() {
window.getSelection().removeAllRanges();
}
This will unselect all previous selections and only highlight the current element being dragged.
The thing that eventually solved my issue was very simple and in CSS,
you can see the answer here
I have a div that, when clicked, I want to an action to happen.
That div contains some text.
If the user highlights the text (e.g. they are trying to copy/paste, rather than actually click it) then I want to cancel the onclick event so that the action doesn't happen if they were just trying to highlight, not actually click.
Is there a way to do this with JQuery or plain old Javascript?
Try detecting the onmouseup event:
document.onmouseup = doSomethingWithSelectedText;
If the text is highlighted, you will have a value in window.getSelection use that to determine what kind of event you should be firing.
Check out this post / fiddle:
Javascript: How to detect if a word is highlighted
http://jsfiddle.net/timdown/SW54T/
Sorry for the strange title question.
I am wondering how to do the following:
When a user clicks on the blurred out textarea through onfocus, it will display: block the div around it, displaying a "textarea console" and then a "add step" icon beneath the textarea. If you click out, it will blur the textarea along with two extra items.
However, what I would like to add is, if they click either the "textarea console" or the "add step" icon, the div will not blur out.
Here's what I have so far at jsfiddle.net
I've updated the jsFiddle: HERE
I think it was just a few things wrong...you were on the right track.
$("#textareasteinstruc").focusout(function() {
alert('focusout');
$(".textareaconsole").hide();
$("#addPrepStepButtonicon").hide();
The # was missing from focusout function...and classes/IDs were not referenced properly.
It's working the way you want it now I'm thinking :)
UPDATE: I added the $("#addPrepStepButtonicon").show(); to the click event so the 'submit' button will appear again
Check this one http://jsfiddle.net/wAaDz/13/ . Have made changes.
I have a "select" input that is programmed to open up a modal box when clicked to get some information before proceeding. That part all works great.
The problem is that once the modal box is up, the select dropdown options are all still visible. I want that select input to go back to being a normal, not clicked on at all, select box.
What javascript or jquery code can I use to make that select dropdown clear away?
I think it is more correct to move handler from click to change. In this case select will be close and keyboard changes also will be processed
Try using this instead:
$('#mySelect').focus(function(event){
event.preventDefault();
// code here
});
If that does't work, try using the preventDefault() with the click event.
The focus will at least allows users navigating fields with the keyboard (tab, etc) instead of the mouse.
Prior to jQuery 1.6
$('#mySelectBox :selected').attr('selected', '');
jQuery 1.6 and higher
$('#mySelectBox :selected').removeProp('selected', '');
I'm not sure that you can do it with standard select tag. Maybe because it still has focus. What I did when I needed a customized select tag is to avoid the select tag completely and use a button which graphically looks like the select button. Look at this page - look at the TAX button and the button to the left of it. There is no select tag, but it works great.