AngularJS contenteditble div - キャレット位置を取得する必要があります

私はこの指示文をhttp://fdietz.github.io/recipes-with-angular-js/common-user-interface-patterns/editing-text-in-place-using-html5-content-editable.htmlから抽出しました。AngularJS contenteditble div - キャレット位置を取得する必要があります

ここは私のコードです。

angular 
.module('app') 
.directive("formulaEditor", function() { 
return { 
    restrict: "A", 
    require: "ngModel", 
    link: function(scope, element, attrs, ngModel) { 
     function read() { 
      ngModel.$setViewValue(element.html()); 
     } 
     ngModel.$render = function() { 
      element.html(ngModel.$viewValue || ""); 
     }; 
     element.bind("blur keyup change", function() { 
      scope.$apply(read); 
     }); 
    } 
}; 
}); 

<div formula-editor id="editor" contenteditable="true" ng-model="kpiForm.formula"></div>

私のdivにカーソル位置を取得する必要があります。私は、（角を使用しないで）見つけたこのコードを実装する方法を知らない：Get caret position in contenteditable div including tags

誰かがこれを手伝ってくれますか？タイ！

出典

2017-05-09 Marco Jr

こんにちは、私は似たようなものを探しています。あなたはこれに対する解決策を見つけましたか？ – AshD

-1

var app = angular.module("myApp", []); 
 
app.directive("formulaEditor", function() { 
 
return { 
 
    restrict: "A", 
 
    require: "ngModel", 
 
    link: function(scope, element, attrs, ngModel) { 
 
     function read() { 
 
      ngModel.$setViewValue(element.html()); 
 
     } 
 
     ngModel.$render = function() { 
 
      debugger; 
 
      document.getElementById('editor').focus(); 
 
      element.html(ngModel.$viewValue || ""); 
 
     }; 
 
     element.bind("blur keyup change", function() { 
 
      scope.$apply(read); 
 
     }); 
 
    } 
 
}; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<body ng-app="myApp"> 
 

 
<div formula-editor id="editor" contenteditable="true" ng-model="kpiForm.formula" style="border:2px solid black;" tabindex="-1"></div> 
 

 
</body>

こんにちは、私は "DIV" にカーソルを集中するために、コードを更新しました。これはあなたにとって有益でしょうか？

出典

2017-05-09 15:27:04

@praveen、ありがとう、私はキャレットの位置を取得する方法を把握しようとしています。カーソルが実際に5番目の文字にある場合、たとえば... –

@MarcoJr Uはwindow.getSelection（）を意味します。ここでは、カーソルのキャレット位置を示すfocusOffset値が見つかります。 –

AngularJS contenteditble div - キャレット位置を取得する必要があります

答えて

関連する問題