We can get Cursor Position with selection concept.  If browser is IE then create empty selection range from current position to starting position, then get selection length which will be present cursor position. If browser is not IE then get selection start which will be present cursor position.

Markup

<input value="sample input value" ng-click="getCursorPos($event)" ng-keyup="getCursorPos($event)"/>
<div> Cursor Position : <b ng-bind="cursorPosVal"></b></div>

Script

$scope.getCursorPos = function($event) {
   var myEl = $event.target;
   $scope.doGetCaretPosition(myEl);  
};
    
$scope.doGetCaretPosition = function(oField) {

// Initialize
var iCaretPos = 0;

// IE Support
if (document.selection) {

   // Set focus on the element
   oField.focus ();

   // To get cursor position, get empty selection range
   var oSel = document.selection.createRange ();

   // Move selection start to 0 position
   oSel.moveStart ('character', -oField.value.length);

   // The caret position is selection length
   iCaretPos = oSel.text.length;
}

// Firefox support
else if (oField.selectionStart || oField.selectionStart == '0')
      iCaretPos = oField.selectionStart;

    // Return results
    $scope.cursorPosVal = iCaretPos;
};

2 comments:

  1. How can i insert text at textarea on last focused cursor position(caret) using Angularjs2

    ReplyDelete
  2. Good blog. Keep sharing. I love them Are you also searching for ajman assignment help? we are the best solution for you. We are best known for delivering writing services to students without having to break the bank

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts