Getting The Index Position Of A Textarea Selection.
Jul 20, 2007
I'm really struggling to find any sample code for getting the start and end position of a text area selection (i.e. a textarea contains the phrase "Why isn't there a standard, well-known function that does this?" and somebody selects the word "there" -- using a function, I'd like to be able to grab the start position and end position of the word "there").
Can anybody help me with this, or am I going to have to hack together some long-winded function to do this seemingly simple task?
i have a dropdown. i want to check the value in 'i'th position. how can i find that? $("DropDownList1_ID").val() is not giving any value. its alerting [object object] .
My intension is, to create my own WYSIWYG Editor with own tags. I am doing this with contenteditable elements. If the user is selecting Text and clicks a button (For Example B) the selected Range should be wrapped in "<strong>|</strong>". To program this I need to know the start and the end of the users selection. But the textrange object and the regular rangeobject are not helping me with this issue.
For Example my text would be:
Lets say the user selected 'name is David'. What I do need now is the position in the document where the selection starts.
In this case I would need 27 as my result, because the number of digits would be:
How to do this with Javascript? It must be possible, because TinyMCE, Aloha etc are working WYSIWYG Editors and they must have figured this out.
I already know execCommand and pasteHTML, but these methods are no alternative for me, because they just create what they want and the code looks different in every browser.
I wrote a simple search function to find text in a textarea where not all the text is visible (ie. the text box displays 10 lines but there may be more than 1000 lines to search). I can find the text and select it using the function below, BUT I can't figure out how to have the textarea automatically scroll to the selection in Firefox. Any ideas or suggestions?
function search(needle,haystack,start) { var element = document.getElementById(haystack); index = element.value.indexOf(needle,start); element.setSelectionRange(index, index+needle.length); }
I have a form which has a dropdown menu on it. The last option on the menu "other". When "other is clicked, I would like a textarea to become visible, so that the user can enter the new information. Does anyone know how I might do this?
Here is the html for the form:
HTML Code: Union: <select name="union" id="union"> <option value="choose">Choose One</option> <option value="ibew">International Brotherhood of Electrical Workers</option> <option value="ibt">International Brotherhood of Teamsters</option>
I need to get the selection position by js and make sure that this code work for all the browsers.
For example, the user selected this text (red text is selected): Hello world The function should return to me array or two values wich they are: 3,9 (start and end position of the selection)
I'm looking for a function that I can use which will do the following when the mouse cursor is in a textarea:
know which textarea to work with based on current cursor position (not sure if this possible, couldn't find examples) - i.e. just 1 'Bold' button to operate on multiple textareas.
insert tag or tags (i.e. ,[image]) at cursor position, if text is selected then insert tags around text selection.
Here's my problem: I need to present text in a scrolling textarea such that a checkbox is not enabled until the user has scrolled to the very last line of the text using the vertical scrollbar.
Been searching for some functions to get scrollbar position for a textarea object but coming up empty.
I am currently working on a small script that allows people to insert BB-codes to edit their text. They are able to click a button (for example underline) and then the bb-code will appear at the end of the textfield-value.How can i retrieve the current position of the cursor within the textarea and then parse the bb-code within?
I've been able to find for an editable HTML textarea for a WYSIWYG editor. It can save and restore the caret position. It works on FF3.5+, IE8, but does not work on Opera 11, Safari 5, or Chrome 10. Any ideas why? I'm just trying to find some code that works on FF3+, opera 10+, safari 5, chrome 8+, and IE7+.
I'm really not sure how to go about doing this, so any and all pointers are welcome. What I'd like to do is be able to find the position and width of a word that has been typed inside of a <textarea>, so that I might overlay some absolutely-positioned elements on top, and size them properly. I would really like to be able to do this in the most general case as possible (independent of fonts, font size, size of the textarea, etc.), but as stated any help is welcome.
Question 1 ---------------- I am writing an advanced BBCode system for my forums and I would like to be able to find where the cursor was positioned last in the text so I could insert the BBCode there.
Question 2 ---------------- Again I am writing an advanced BBCode system for my forums and I would like to make is so that when someone puts in a [b] tag it goes bold, so kind of a WYSIWYG editor and also for other things like [img] tags and [url] tags. So could someone tell me how to do that. I would preferably like it to still use the textarea tag, or at least a form component so my existing code works.
I've got this javascript routine (i found on google) in an asp.net page that on page reload sets the cursor of a textbox to the last line. It works great!
Using a similar concept, I have another application that uses a textbox like an editor window and has a save and other buttons. Problem is - when I save/post/reload, the textbox returns to cursor the top again.
How can I preserve / save the exact cursor spot and return to the exact same spot I was in before I saved. Code:
When I leave the first textbox (taborder 1), I need to check and see if the textbox contains avalue. If it does, then I need to check and see if the second textbox (taborder 2)contains a value. If it doesNOT, then I need to loadthe second textboxwith "100" and highlight (select) the text. I am adding a blur event to all the column one textboxes as they all contain"rawCount" in the id. Here is my blur event code:
$(document).ready(function(){ $('input[id*=rawCount]').bind('blur', function (event) { // Code to go here }); });
What I am trying to do isadd thecode tocheck and update thecolumn two textbox in the corresponding row (same index)to the blur event of the column one textboxes without having to loop the array each time to find the current textbox array position. Since it is adding the blur event, it has to be possible.
i,m trying to make a map who show me as position A and a target adress as point B.I have made it so i can choose adress a and adress b from a dropdown but i want to automaticly load my position as possition A then choose position B from a dropdownlist. How can i do this ?
I have the below array called "results". When I loop through all document elements I would like to check "field_name" against the "results" array and see if it exists and what index number it is at??
// Split the comma delimited response into an array results = result.split("~"); //Loop through array and populate fields[code].....
I am trying to get the index of a li with a specific class. I know I'm selecting the right object because I can apply a CSS class to it (eg change border colour) but when I try to get the index it returns -1. But I know the object exists as I can alter it. :-s
jQuery(document).ready(function() { var active = $("#tertiarynavigation .bordered").get(0); var num = $("#tertiarynavigation li").index(active); alert("Index: " + num);
I have a problem with layers. In my example there's a link inside div#msg with 'z-index:1' and a overlay with 'z-index:2'. Now when "mousedown" fires, will change the div#msg z-index value from 1 to 3 to be on Top, so the link become a clickable link.
The question is, it is possible to make the link on top and open it with just one click?
I'm new to javascript and am not sure why this works in firefox and not chrome. I am trying to create a script that keeps an object fixed horizontally while bing positioned absolute vertically. if I replace the toPP variable in document.getElementById('fire').style.top = toPP; with say '50px' it will move the element down 50 pxs, but how I have it currently it doesn't do anything in chrome
<script type="text/javascript" > window.onscroll = function() { if( window.XMLHttpRequest ) { var x = 0 -document.documentElement.scrollTop; var toP = String(x); var toPP = toP + "px";
