I have a text (sentence) in a textbox. How do I select or highlight a word under the mouse pointer? I am using JSF.
Thanks and regards
I am not familiar with JSF, but you can have a look at what I have done.
I am not sure how to 'enable' html tags in a textarea, like you will see in my link. But I did it in a DIV tag too, so you can see that the highlight works.
http://jsfiddle.net/dkYHG/1/
Process : Read all words, place span's around each word and bind the event.
This can give you some direction ;)
Related
I have a pre element that has a bunch of read-only text in it and I now have spell-checking working on the pre. However, if I right-click on the text that has the spelling error, I am able to change the value in the pre element. Is there any way to prevent the auto-suggestion from populating for this element?
Edit: I want to keep the spell-checking. I don't want the user to be able to right-click to auto-correct the mis-spelled word. I do want them to be able to add the mis-spelled word to their dictionary though.
You can use spellcheck=false with textarea and input.
Here is a fiddle with and without spellcheck property it: https://stackblitz.com/edit/react-kmyptb
EDIT:
More info at : https://www.tutorialrepublic.com/faq/how-to-disable-spell-checking-in-html-forms.php
I am so sorry. for not knowing english. you can see the question from the picture. How can I do with javascript?
Surround the word you want with a span, then use event onMouseEnter to show tooltip and onMouseLeave to hide it.
You can use a data attribute or title attribute of the span to get the text to place in the tooltip.
I have a textarea in which text pieces (stored on each data-code attribute) are appended when clicking on an specific DIV:
$(document).on('click', '.extrasPanel .contentVars div', function(e){
varCode = $('.active').attr('data-code');
varText=$(document).find('textarea').val();
$(document).find('textarea').val(varText+varCode);
checkCounter(e);
});
Once a .contenVars div is clicked, its data-code value is added to whatever is typed on textarea, and to keep typing the user must click again on the textarea.
I would like the user to keep typing after importing this pieces of text widthout needing to click back on it, so that the cursor remains on the last position, after the last imported character (as if you would have pasted it).
I have tried adding e.preventDefault; at the end of the function, with no possitive result.
If you're using jQuery, you can try .focus()
jQuery('textarea').focus();
May this link will helps you..
jquery-caret.js
This is a very simple lightweight plugin to allow you to move the caret (or cursor) position in an or element
$('textarea').caretToEnd();
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/
I have a textarea #myarea into which I'm typing text. I've typed this text.
This is a sentence and only this word
will end up being bolded
Now I have a button on the side, like a bold button. I want to select the letters I want bolded, click the button, and see those letters turn bold inside the textarea. It's similar to the standard functionality found in many editors, but I'm looking for something much simpler as I described here.
So is there a way to do this with jquery? I'm guessing it's a 2-part problem. I need to find the letters selected, then apply bold to them so it shows bold inside the textarea.
If you don't mind using a div that has its ContentEditable property set to true then you can easily do this using:
document.execCommand('bold',null,false);
You can easily style this div to look and feel like a textarea.
See jsFiddle here: http://jsfiddle.net/hqvDT/1/