Find SelectedText by mouse Selection in div jquery? - javascript

I want to find it out selected text on div which select by mouse. I found out .select() method for select. but its not accomplish my problem.
i want to something like :
<div id='mydiv'>Lorem Ipsum is simply dummy text of the printing.</div>
when i selected simply text using mouse selection.i found it out using jquery.
or something else another selected i want to get it.

you don't need to select it.
all you need to do is to add a click handler.
document.addEventListener('touchend', handleTouchEnd, false);
function handleTouchEnd(e){
console.log(e.target.innerHTML);// returns whatever is there in the div
console.log(e.target.textContent);// better option, as it returns text only
}

Related

How to cancel selection in contenteditable div?

On my page, I have a contenteditable div element. When a specific key is pressed, a function executes:
function bla(element) {
if (getSelectionHtml() != "") {
replaceSelectedText("text");
}
}
getSelectionHtml() checks if something is selected by the user. replaceSelectedText(text) replaces the selected text with a given string. Both functions are working properly.
After the selected text has been replaced, I want to 'cancel' the user's selection, as the selection is now equal to the 'new' string, so just deleting the text is not an option.
I tried this:
element.style.userSelect = "none";
element.style.userSelect = "text;
But it didn't work because userSelect: none doesn't seem to change anything in a div element with contenteditable. Also, this solution looks pretty ugly for such a simple problem.
So, how can I cancel the user's selection?
I think you want to remove selection completely. You can do so once you have replaced the string with
window.getSelection().removeAllRanges()
So basically, once you select the range of content, you can get the range with window.getSelection() method which returns set of details about selected content. It has many functions to alter the range and remove the range completely. To know more, you can read in brief of all supported methods Selection API

How to get what element was clicked by disregarding dom?

I'm trying to create a color picker and have run into a massive issue. Say for example I want to click on a div behind some text to change it's color, I won't be able to do this because the text will override the bg. What can I do here to make it so I can click the element without including the dom box that all elements have?
By running stopPropagation() it will only select the clicked element.
$(".ColorCardBackgroundView").click(function(e) {
e.stopPropagation();
document.getElementById('ColorCardBackground').jscolor.show();
});

append text on search input on click

I have few anchor elements containing some text, something like "Cat", "Cow", "Dog".
When I click on "Cat" for example I want to append the text on the search input.
I've tried this:
jQuery(' .link ').on('click', function(event) {
jQuery('input[name="search"]').val(jQuery('.link').text().trim());
jQuery('input[name="search"]').keyup();
});
But I need a way to listen for each anchor element and update the search input accordingly, right now it works just once.
Any suggestions?
The problem is caused by your selector inside the click function, instead of adding the text of the clicked element to the search box, you are writing all elements' texts to the search box sequentially, thus only the last .link text remains in the search box. Try this instead:
jQuery(' .link ').on('click', function(event) {
jQuery('input[name="search"]').val($(this).text().trim());
jQuery('input[name="search"]').keyup();
});
Here's a Fiddle, see if that's what you were looking for.
You haven't provided HTML so I'll take this(stackoverflow) page as example...
You can take text and add it to yours input property accordinglly: document.getElementById('search').children[0].placeholder = document.getElementById('nav-tags').textContent;
Practically, you should do something like this:
Some animal
Or, to make it more readable, create function and add event listener, but this is base...

jQuery select on div content

I am making a small text editor, and for that, I would like a similar effect when a user selects some text as here: http://raphaelcruzeiro.github.io/jquery-notebook/
I was thinking of using the jQuery select event, but I can't seem to get it working on divs, only on input fields.
<!--<input type="text" class="writing-area" value="foo bar">-->
<div class="writing-area">foo bar</div>
<script>
$(".writing-area").select(function(){
alert("Text marked!");
});
</script>
You can see a demo here: http://jsfiddle.net/WL2nz/
The outcommented HTML works just fine, but the div version does not.
What am I doing wrong? Can select not be used on divs?
The MDN reference for the select event says that the HTML5 spec only defined the select event for inputs and textareas.
In accordance with jQuery docs, "this event is limited to fields and boxes".
From the jQuery page (http://api.jquery.com/select/) for the .select() function:
"The select event is sent to an element when the user makes a text selection inside it. This event is limited to fields and boxes."
To get the effect you are look for, have you considered onmouseover or onclick with a clickable element?
In addition, the Dojo Toolkit is one place where you can get a nice tooltip to craft something similar to what you are looking for: click here
All answers are correct, but the plugin you have linked to, does it this way:
After using the keyboard or the mouse (keyup,focus,mouseup...) the plugin checks if something is select. If something is selected the bubble pops up.
The code is here
we highlighted the color of div text when hovers it and remove the color while non-hover the text.
$(".writing-area").hover(function(){
$(".writing-area").css('color','red');
},function(){
$(".writing-area").css('color','');
});
http://jsfiddle.net/WL2nz/4/

Selecting text in div on mouseover

How can I select text when I mouse over a div?
If you mean selecting the text as if you dragged over it, read this question. Whichever approach you try, to make it happen on mouseover, use .mouseenter():
$('#mydiv').mouseenter( function(){
my_superduper_selection_function(this);
});

Categories

Resources