How do I stop the text cursor from jumping on the last line of a textarea ?
//textarea $watch
$scope.$watch('string', function(s){
var string = s.split('\n');
if(string.length > 0) {
var newElements = [];
for (var i = 0; i < string.length; i++) {
var str = string[i];
var obj = {};
var firstMatch = str.split('|')[0];
var secondMatch = str.substring(firstMatch.length + 1); //return '' if '|' was not found
obj.text = firstMatch;
obj.value = secondMatch;
newElements.push(obj);
}
$scope.elements = newElements;
}
});
//array of objects $watch
$scope.$watch('elements', function(e){
var string = '';
for(var i = 0; i < e.length; i++){
var str = e[i];
var value = str.value;
var pipe = '|';
var text = str.text;
if( value == ''){
pipe = '';
}
string += (text + pipe + value) + (i == e.length - 1 ? '' : "\n");
}
$scope.string = string;
}, true);
The text cursor (within textarea ) is always jumping to the end after value is being erased. For example: try to delete the first value ( value1 ) in textarea until the pipe ( | ), the text cursor goes at the end of the line. I want the cursor to be in the position where value1 is.
text1|value1 <-- depois que o value1 é apagado, o cursor de texto vai automaticamente no final da linha, mas eu quero que o cursor fique aqui depois que o ''value1'' é apagado
text2|value2
text3|value3
text4|value4 <-- cursor de texto vem parar aqui
Jsfiddle with example:
angular
.module('App', [])
.controller('Ctrl', function($scope) {
$scope.elements = [{
text: 'text1',
value: 'value1'
},
{
text: 'text2',
value: 'value2'
},
{
text: 'text3',
value: 'value3'
},
{
text: 'text4',
value: 'value4'
}
];
$scope.$watch('string', function(s){
var string = s.split('\n');
if(string.length > 0) {
var newElements = [];
for (var i = 0; i < string.length; i++) {
var str = string[i];
var obj = {};
var firstMatch = str.split('|')[0];
var secondMatch = str.substring(firstMatch.length + 1); //return '' if '|' was not found
obj.text = firstMatch;
obj.value = secondMatch;
newElements.push(obj);
}
$scope.elements = newElements;
}
});
$scope.$watch('elements', function(e){
var string = '';
for(var i = 0; i < e.length; i++){
var str = e[i];
var value = str.value;
var pipe = '|';
var text = str.text;
if( value == ''){
pipe = '';
}
string += (text + pipe + value) + (i == e.length - 1 ? '' : "\n");
}
$scope.string = string;
}, true);
});<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script><divng-app="App" ng-controller="Ctrl">
<div class="sortable-item-contents" ng-repeat="(id, content) in elements track by $index">
<div class="row">
<div class="col-xs-4">
<div class="form-group">
<input type="text" ng-model="content.text" class="form-control" />
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<input type="text" ng-model="content.value" class="form-control" />
</div>
</div>
</div>
</div>
<textarea ng-model="string" class="form-control" style="resize: none; height: 210px;"></textarea>
</div>