I found a jQuery plugin that allows me to highlight my text with a color which works perfectly. But now I need to get the highlighted text selection and place it in a text box.
I found this code which is exactly what I'm looking for although it doesn't pick up my color highlight as a selection.
This is the code I found and want to use is at this link http://www.codetoad.com/javascript_get_selected_text.asp#highlight2
As I suspected, the plugin "only" wraps text in a span. To access that text, you can use standard jQuery selectors. Basically, it works like this:
// the plugin generates new <span> elements with class="highlighted".
// You fetch all those with $('.highlighted.'). Then you get their text
// content by calling .text() [1]:
var text = $('.highlighted').text();
// Access your <textarea>, where you want to put the text into. Either
// use an ID element and use $('#id-of-textarea'), class or other means.
// to get the 1st one, use the ':eq(0)' jQuery selector (':eq(1)' for the
// second and so on) [2]. Then set the text with the jQuery .val() call [3]:
$('textarea:eq(0)'.val(text);
In your question you link to getSelection() method and its relatives. Those are good, if you want to access text selected by the user via mouse.
[1] http://api.jquery.com/text/
[2] http://api.jquery.com/eq-selector/
[3] http://api.jquery.com/val/
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 confused, I used jQuery to $("#display").html(value) toward my html input with id ="display" but nothing appears in the html input.
However we can see the value in the element : "32" (see picture)
Any idea why the value doesn't appear?
I try to replace input by span and it works well.
image : example
thanks,
Thomas
You cannot set the innerHTML value of an input element (which is what jQuery is doing when you use $.html()). Instead, you need to use $.val().
Try using $("#display").val(value) instead.
I have Got a div with two text area fields in it and , i have got a list of names where ; if you click on a name from the list it fills the first text area with the name and second text area with surname. This is done via jquery.
I need to save all the content of the div with the values in to mysql and for this reason I have tried .html(), .text(), get().innerHTML, get(), content(), but even though it gets the html , it doesnt not get the text area html with value.
You need to grab the text area fields individually and then use .val() on them to get whatever will be entered in the field.
ok i found a way to do it , when i mentioned that you click on a name from the list it sets the value of the text area; i used ,val(); , but instead i am now using .text(); and it allows me to get the value of it when i use .html(); to get the entire content with the form values. It may not be the best way but it does the job , I am open to suggestions
I am using some JQuery Combobox that you can check out here: https://simpletutorials.com/uploads/1860/demo/index.html
As you can see, you can start typing and get the results filtered.
However, once you have selected a value, when clicking on the arrow to open the list, no other values are shown anymore. So, if I want to change college/state, I need to manually clear the input value. I don't like this, so I want to modify it.
I changed that code and added this JS on the click event of the list:
onclick="document.getElementById('statesCombo-ddi').value='';"
This line basically finds the input by id and sets its value to an empty string.
You can try out by looking for the td element having class "stc-button" (with Chrome, just focus on the arrow of the second combo box) and add my code to the tag.
===EDIT===
You can obtain the same results by adding this code directly to the input:
onclick="this.value=''"
===END EDIT===
This has a weird behavior:
If I SELECT an element from the list, it clears the value and everything works correctly.
If I TYPE some letters and then select a value from the list, no item is shown in the list after clicking.
What's wrong with it?
You can override one of the combo box methods to accomplish this:
STComboBox.prototype.filterAndResetSelected = function() {
this.$('ddi').val('');
this.filterList('');
this.selectRow(0);
this.$('ddl').scrollTop(0);
};
Does this help?
The unminified code is provided, is relatively small (12kb) and is fairly well commented, so you could make this modification directly to the source if you'd like.
Edit: Fixed to clear the input value (as indicated in the comment below)
By reading the source and doing a little debugging with Chrome's inspector (Control+Shift+i), you can find the particular ID of the element you need to clear (#collegesCombo-ddi) in order to clear the input box. Once you've found the element's ID you need to clear (and being very careful with plugins that assign multiple elements with the same ID, which is not allowed in the standard, and an indicator of poorly-written code):
$('#collegesCombo-ddi').val('');
I'm developing an extension for Google Chrome; as a part of it there is a text highlighting capability.
I've managed to highlight a complete <p></p> tag (or any other tag) but I can't figure out how to highlight a part inside a tag. (user will not select an entire tag)
I found that I should use <span> inside the <p> tag but I can't figure out a way to do it.
How do I identify the part that the user selected?
How do I highlight the selected part (eg change the back color)?
A detailed explanation would be really helpful and highly appreciated, since I'm new to extension development.
What I've done in the past is split the text into 3 parts:
1- the text before the selected text.
2- the selected text.
3- the text after the selected text.
Then I clear the element's innerHTML (or another method), add the 'before' text, add a span with their text as its text (which has a style that can be highlighted), and the 'after' text.
To find out what they selected, you can use ranges (selectionStart & selectionEnd)
e.g.,
var html = elem.innerHTML;
var before = html.slice(0, elem.selectionStart);
var selected = html.slice(elem.selectionStart, html.selectionEnd);
var after = html.substring(html.selectionEnd);
This method isn't perfect, but it's a good starter to learn with.