gpt4 book ai didi

javascript - 如何使用 angularjs 捕获突出显示/选定的文本?

转载 作者:行者123 更新时间:2023-11-30 15:28:21 26 4
gpt4 key购买 nike

我希望能够使用 AngularJS 从输入字段中捕获文本/字符串的突出显示部分。我不太确定从哪里开始解决这个问题。

比如我有一个textarea:

<textarea ng-model="input" placeholder="type your input">

我如何才能捕获用户使用他/她的鼠标指针突出显示或选择的文本部分?

最佳答案

您可以创建附加到 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>

关于javascript - 如何使用 angularjs 捕获突出显示/选定的文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42622014/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com