如何使用 angularjs 捕获突出显示/选定的文本？
Posted
技术标签:
【中文标题】如何使用 angularjs 捕获突出显示/选定的文本？【英文标题】：How to capture highlighted/selected text using angularjs? 【发布时间】：2017-07-26 02:37:59 【问题描述】：我希望能够使用 AngularJS 从输入字段中捕获文本/字符串的突出显示部分。我不确定从哪里开始解决这个问题。
比如我有一个textarea：
<textarea ng-model="input" placeholder="type your input">
如何捕捉用户使用鼠标指针突出显示或选择的文本部分？
【问题讨论】：
你所说的捕获是什么意思？ 【参考方案1】：您可以创建附加到 textarea 和输入元素事件的指令，并监视当前突出显示的文本。类似的东西
var app = angular.module('module', []);
app.controller('MainCtrl', function($scope)
$scope.selectedText = '';
$scope.textSelected = function(text)
$scope.selectedText = text;
$scope.$apply();
//alert(text);
;
);
app.directive('inputFieldSelection', function()
return
restrict: 'A',
scope:
onSelected: '='
,
link:function(scope, elem, attrs)
elem.on('select', function()
var text = elem.val().substring(elem.prop('selectionStart'),
elem.prop('selectionEnd'));
scope.onSelected(text);
);
elem.on('blur', function() scope.onSelected('') );
elem.on('keydown', function() scope.onSelected(''));
elem.on('mousedown', function() scope.onSelected('') );
);<!DOCTYPE html>
<html ng-app="module">
<head>
<script data-require="angularjs@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
<textarea input-field-selection on-selected="textSelected" type="text"></textarea>
<p>selectedText</p>
</div>
</body>
</html>【讨论】：
【参考方案2】：angular.element('[ng-model="YOUR_MODEL_NAME_HERE"]').prop('selectionStart');
angular.element('[ng-model="YOUR_MODEL_NAME_HERE"]').prop('selectionEnd');您可以使用 'selectionStart' 和 'selectionEnd' 来获取选择范围。希望这会有所帮助
【讨论】：
请在答案中添加 Working sn-p以上是关于如何使用 angularjs 捕获突出显示/选定的文本？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Listview 中获取选定的 SubItem 索引并突出显示它？