selectionStart and selectionEnd for textarea/input not working properly in java script

Question

i want to get the cursor position's value where started focus to end for this am using

var doIt = function() {
    var elem = document.getElementById("mytext");
    var start = elem.selectionStart;
    var end = elem.selectionEnd;
    var selection = elem.selection;
    alert("selectionStart: " + start 
          + "\nselectionEnd :" + end
          + "\nselection: " + selection);
}

but problem is selectionStart and selectionEnd getting same last value only. how to get properly start and end value example is here http://jsfiddle.net/5vd8pxct/ which i tried

Your [jsfiddle](http://jsfiddle.net/5vd8pxct/) is giving proper outputs for `selectionStart` and `selectionEnd`. Your question is unclear, what end result do you want? — rmalviya, Mar 21 '17 at 08:50
when i focused first time my selectionStart will be this.value assume very first time my selectionStart will be 5 then i will type further 5 text . now my selectionStart value is 5 and selection end should be 10 but i am gettin both 10,10 — Ramusesan, Mar 21 '17 at 08:54
`elem.selectionStart` and `elem.selectionEnd` gives you the position of starting selection character and end selection character. So if you put your cursor at a particular position without selecting some text, then it should return same values, as expected. To understand this try selecting some text and then check results. — rmalviya, Mar 21 '17 at 09:01
then how can i can get the cursor value of when i put cursor between some paragraph and type word . i meant need to get cursor values start end end of word which i typed between paragraph — Ramusesan, Mar 21 '17 at 09:07

score 1 · Accepted Answer · answered Mar 21 '17 at 09:46

1

I've modified your code for your desired results. Here boolean firstKeyup keeps track of first keyup event at first load and after clicking the button.

var elem = document.getElementById("mytext");
var start = 0;
var firstKeyup = true;

elem.addEventListener('keyup', function() {
  if(firstKeyup) {
    start = elem.selectionStart;
    firstKeyup = false;
  }
});

function doIt() {
  var end = elem.selectionEnd;
  var selection = elem.selection;
  alert("selectionStart: " + start 
          + "\nselectionEnd :" + end
          + "\nselection: " + selection);
  firstKeyup = true;
}

<textarea id="mytext" rows="10" cols="30">
Really long text goes here
</textarea><br/>
<button onclick="doIt();">Click Me</button>

answered Mar 21 '17 at 09:46

rmalviya

1,847
12
39

Is it possible to trigger function when i select some range of text from text field – Ramusesan Mar 21 '17 at 09:52
Use [this](https://developer.mozilla.org/en-US/docs/Web/Events/selectionchange) reference. Also, you can take a look at [this](http://stackoverflow.com/questions/2385773/how-to-select-a-range-in-an-iframe-with-start-and-end-in-firefox-like-selec?rq=1) or [this](http://stackoverflow.com/questions/845390/javascript-to-get-paragraph-of-selected-text-in-web-page). – rmalviya Mar 21 '17 at 10:02

selectionStart and selectionEnd for textarea/input not working properly in java script

1 Answers1