How would you get the currently selected text within a textarea (and modify it)?
I've seen the select event that can be listened for, but I was wondering if there was a way to just get the currently selected text.
Also, what technique do you need to use in order to be able to modify that specific section of text within the textarea? I assume there's some way of finding out what the position of the selection is within the contents of the textarea as a whole?
What I want to be able to do is take the selection and modify it, or wrap it in certain tags etc., like you are able to do in the stackexchange text editor.
If you only have to support the latest browsers, you can use the selectionStart and selectionEnd properties which expose the character positions of the text selected in the textarea. You can't modify just the selected text but having updated the value you can use setSelectionRange to reselect the text.
I've posted what I consider the definitive function to do this in all browsers (including IE < 9) on Stack Overflow many times. Here's one example:
IE's document.selection.createRange doesn't include leading or trailing blank lines
I'd also recommend my jQuery plug-in for this, which includes this function and others to insert, delete, surround or replace the selected text, which sounds like exactly what you want. It's also the only jQuery plug-in for textarea selections I'm aware of that works correctly with line breaks in IE < 9.
From this page
http://www.netadmintools.com/art466.html
function display(txtarea) {
var sl = (txtarea.value)
.substring(txtarea.selectionStart, txtarea.selectionEnd);
}
<body onload="thisForm=document.frmKey;">
jquery field selection plugin..
Download Here examples on site.
The ::selection selector might work as well.
http://www.w3schools.com/cssref/sel_selection.asp
Related
I'm working on a Chrome Extension which I want to replace certain characters in a specific text field on one specific website. It is basically to change emoticon text (like ":-D") into the proper emoji's, such as "😄". I tried a few things I found online (I'm not very good with JS):
- A MutationObserver and then look for all text fields with a certain name, then replace all emoticons by hand. Didn't really do the job properly and also kept firing up the print window for some reason
- Event listener added with event 'keyup' but it doesn't seem to fire up.
Hope you guys know a good solution!
This question does not give anywhere near enough information to answer. Are you using the program for input fields on the website? What solutions have you tried? Where is the code? Essentially, you are asking us to write the entire program for you. This forum is meant for programming help, NOT doing the entire program for you. You need to fix the question to be more specific.
If you just want to replace text elements, you would have to use the select elements by tag name to select all text elements on the page and then search through each of these for the sets of emoticons. Once finding these, you would have to change the elements inner html to fit the emoticon from UTF-8.
I have a notepad file of about 10,000 words. I can export them as csv or tab separated values as required. Is there a way for my words to appear as suggestions in a textbox (input type text)?
This word work in the same way as google.
In HTML5 you have the datalist element which gives you a kind of autocomplete feature. Although I'm not really sure about what you want an answer to, for example it is probably not that efficient to put 10 000 words inside the datalist element.
You can use jquery along with some plugin for maximum cross-browsing capability.
Here is an example of what you are trying to achieve http://jqueryui.com/autocomplete/
Click on the vew source link on the page to see how it is done.
Edit:
Since you are using a lot of elements, why not creating an ajax request after the text change to load the elements you want and then stream them into a div right under the text box? This will make you more in control of what the user is seing and it will work on all browsers.
Update
I recently discovered you can programatically create selections with Chrome which aren't continuous, by either replacing elements / textnodes inbetween in the parts you want unselected or hiding and then showing them.
Example of non-continuous selections for Chrome: http://jsfiddle.net/niklasvh/YKJBW/
var t = $('div').contents().get(0);
$.each(t.nodeValue.split(" "),function(i,e){
t = t.splitText(e.length);
if (t.length>0){
t = t.splitText(1);
}
});
var c = $('div').contents();
$.each(c,function(i,e){
if (i>0){
if (i%3) { }else{
e.parentNode.replaceChild($('<unselect />').text(e.nodeValue).get(0),e);
}
}
});
$('unselect').hide();
window.setTimeout(function(){
$('unselect').show();
},0);
However when performing the copy event, the whole selection does get selected (even if it has gaps in-between), but of course the same method can be used to programatically alter the selection before the copy event is performed.
The tricky part now is that can you actually make this functionality usuable by holding Ctrl down like you can in Firefox to create non-continous selections. The current method I use in the example breaks the TextNodes into many pieces, which for visual purposes does no difference. It however, also uses additional tags to break the selection, which as far as I've discovered, cannot be removed. However, the same functionality can be reached by deleting TextNodes and adding new ones in place for them. The problem is that it will only take into account the last node added, so if you have multiple spaces in your selection, it will only take into account the last DOM change you applied.
Can anyone think of any non-document breaking ways to apply this non-continous selections which does not make any permanent changes to the selection and its elements?
The original question
Is it possible to make selections which are non continous in Google Chrome? For example if you have an element with text like this:
<div>this is some random text</div>
Is it possible to make a selection which contains for example this is and text making the text in-between unselected?
This seems to work fine in FF, where you can addRanges which aren't next to each other, and the selection is made accordingly.
For IE, there doesn't seem to be anything that would allow you to have multiple ranges, but IE's selection object has a lot of other methods that compensate for it.
With non-continous selections, you could always append or prepend a selection a certain section from a website for example when performing copy actions, or force the user to unselect certain portions of their selections, which you don't want them to copy.
Example of non-continous selection:
working example (working at least in FF4).
edit
To perform the same type of selection manually, you can with firefox hold ctrl down and start dragging text in different positions, but performing it on chrome doesn't work.
edit 2
I guess this and this sum it up quite well. Looks like there isn't anything to be expected as far as webkit browsers are concerned.
No. Firefox is the only mainstream browser to support multiple selected ranges. I think the main use case for it was to allow selection of individual columns within tables, which is not possible otherwise.
WebKit are not planning to support multiple selected ranges any time soon, from what I can gather. IE overhauled its Range and Selection APIs for IE 9 and didn't implement it. No idea about whether Opera has any plans to support it. See this thread from the WHATWG mailing list for some information:
No, there is no concept of multiple text span selection. The selection is associated with the caret. One caret - one selection.
I'd like to take the selected text on screen (text highlighted with the mouse) and when a button is pushed wrap that text in a tag. I'd like to use jquery but if it can be done in another framework that would be fine too.
I haven't been able to figure out how to do this yet, so any thoughts are appreciated. Also I know you can run into issues if the text goes across several elements so for now case just assume the text highlighted is all contained in a tag.
Thanks!
Highlighting the selected text doesn't necessarily require you to wrap it. In fact, trying to wrap it is difficult if the range of the selection spans multiple tags (i.e. doesn't surround nicely closed tags).
Here's an answer that highlights the current selection without wrapping it: Javascript Highlight Selected Range Button.
He uses execCommand to let the browser highlight the current document selection for you. Pretty sweet.
Here is a post on working with selected text. The getSelection() method can be used to get the selected text, then you should be able to replace that text with text wrapped in a tag.
I'm trying to insert text into an html textbox when the user pushes buttons. This is a simple on screen numeric keypad. I have found many different scripts claiming to be able to find the current cursor position in a textbox cross-browser, but none work in IE (I'm using IE8). Is this just an IE8 defect? Is there a workaround?
It seems like there must be a definitive answer about this somewhere, but I have looked far and wide to no avail. To reiterate, how do I find the current cursor position in an html textbox?
look here:
http://javascript.nwbox.com/cursor_position/
Pete, you can also save the caret position by using an "onblur" event so you always know the previous caret position.
The link in the selected answer is no longer working.
I found out you need to use field.selectionStart.
Please check out this answer:
https://stackoverflow.com/a/48150864/4031815