I've been working on some logic to process highlighted text by a user. I found a very good example by Mark Koli at http://mark.koli.ch/2009/09/use-javascript-and-jquery-to-get-user-selected-text.html.
I've created a working example at: http://jsfiddle.net/metalskin/43c8h/8/
I have a problem with the code for a specific instance as follows:
select some text.
dialog appears.
close dialog.
now click without a drag to clear the highlighted text.
dialog appears.
close dialog.
text is deselected.
In my logic I'm not using a dialog (it's just easier as an example), I'm inserting a div with an image to allow the user to perform an action.
The problem is that the second click is really to clear the text, but for some reason the browser is firing the mouse up event before the browser clears the text (well under Firefox anyway). This is not obviously a problem with the dialog popping up, but with my logic I end up getting multiple div's added, and as such multiple floating images over the text.
Is there someway to determine that the event will result in the highlighted text being removed? Ideally I would rather the event fire after the browser has cleared the text.
I should explain the use case of how I'm using it.
user highlights text on a page
an icon appears above where they just released the mouse button from highlighting the text
the user selects the icon, which opens up a form to enter some details to mark against the highlighted text (the icon is removed at this point in time)
the user submits the form (ajax), the form closes.
page is displayed, highlighted text is now not highlighted (but extra markup is added).
or
user highlights text on a page
an icon appears above where they just released the mouse button from highlighting the text
the user clicks elsewhere on the page to both remove the highlighted text and remove the icon.
the user submits the form, the form closes.
I've no problems with the selected text being de-selected when the icon is chosen, but the problem is if they click on another part of the page, it reactivates the mouse event and thus double icons (or a dialog when it's not appropriate in the example provided).
Here you go ^_^
http://jsfiddle.net/43c8h/16/
I just changed this piece of code to clear the selection on the mouse up event.
if (selectedText != '') {
alert("You selected:\n" + selectedText + "\n");
window.getSelection().removeAllRanges();
}
Or if you wanted to keep the text highlighted after the user had selected it, you could call a mousedown function with the same window.getSelection().removeAllRanges(); code to clear the selection every time the mouse is clicked.
Related
When designing a task, I write the name of the task, and then press the Add button, the item appears, and next to it, the Finish button. When I press Finish, the item appears in the Tasks section that has been executed, and next to the item, a Notes button. When I press the Notes button, the text area appears and disappears, and in the text area there is an edit button. When I click on it, I can write a comment inside the text area, and by pressing the Save button, the modification is locked to the problematic text area? When I add more than one element, the entire text area takes the same first comment, and I want each element to be stable in writing the text area so that I can modify the comment in any element without affecting the rest of the elements
https://codepen.io/amr77/pen/QWBqLVJ?fbclid=IwAR2JmTaZUliSixWR3vei3-zQdJOcIOuxm-eLs5KRgtkqxO8I3QRfwGFJ6Yw
Example
I want to create a popup, directly in JS, that fires when text is selected and a button is clicked
My ultimate goal is when the user selects the desired area of text and clicks on the button, it triggers a popup.
Please point me to the right way how to do it
My company has a MegaMenu on their internal web portal. One of the popup menus has a Search input field which works fine. The problem is that when someone types in the input field and the mouse pointer moves off of the megamenu it, of course, disappears. I need to keep that popup menu open/visible while the user enters the search parameters. Whatever they typed is also invisible until they mouse over the menu item again. Also I am not sure if I should look at onfocus attribute, cursor positioning or a mousemove event.
You need to opt for show/hide on click rather than toggle on hover. So that unless user does not wish to make that hide it is open. As it is convenient for users.
I'm using a form where in a text box is bound to a variable object by its path. I also have a button to fetch few records based on the input given in this text box. When I enter something for the first time and hit the button, it fetches the records. But again if I try to hit backspace or delete buttons inside the text box, it takes me to the previous page instead of simply deleting the text inside. Is there a way out? I tried with events like preventDefault() using keyCode restrictions, but in vain. Please help.
PS: This text box has regex validations and also has logic to pre-populate.
when records are fetched, you lose the focus on your text box. When you press the Backspace key once more, the browser takes you to the previous page (as most browers do). Set the focus back on your element after you fetch the records or change you code so the records fetching will not change the focused element.
See : https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.focus
I have three search categories (see first image). The user selects one and I show the search input that corresponds to that topic in the space of the categories (see second image). I automatically focus on the input with jQuery so the user can easily begin typing. If the user changes their mind and blurs the intput I hide it and again show the three categories.
This all works great if the user clicks enter to search, but I also want to allow them to be able to click the go button next to the search input field. The issue is that if they try to click the go button the input is blurred and then hidden and the submit click is never fired (I cannot unbind the blur event upon clicking this element because it is never fired - the blur is triggered first)
So is there any way to execute the function bound to the blur event (hiding the div) unless this "go" element is clicked using jQuery or JavaScript?
You have several options:
You can only hide the input on blur if the focus has gone somewhere outside its container, so if the focus has gone to the "Go" button, you don't hide the input at all.
You can your code design and fire the search question as an ajax call rather than a form submit.
You can hide the input on blur after a brief setTimeout() which gives the form submission a chance to get sent before it's hidden.
instead of placing the blur event on the input, place the blur event on the container that holds both the input and the Go button.