在 ace 编辑器中的“剪切”事件之前触发事件
Fire an event before `cut` event in ace editor
我想在剪切之前触发一个事件,以便我可以获取正在剪切的文本,即已经选择的文本。我目前正在使用以下代码,它似乎没有按预期工作。
$("#editor").bind({
cut:function(){
console.log('Cut Detected');
alert(editor.selection.getRange());
}
});
编辑器是可编辑的"div"标签的 ID。 editor.selection.getRange() 返回选择的开始和结束。编辑我正在使用内容可编辑的div,并希望在其上应用该功能。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Editor</title>
</head>
<body>
<div id='myTa' contenteditable>hello world where are you</div>
<script type='text/javascript' src='jquery-2.1.4.min.js'></script>
<script type='text/javascript'>
$("#myTa").on("cut", function(){
alert(this.selectionStart+ " to " + this.selectionEnd);
})
</script>
</body>
</html>
您是正确的,您需要使用 cut
事件。剪贴板事件 API 显然不稳定,但是是的,我本以为它会包括移动到剪贴板上的文本。
以下内容对我有用:
$("textarea").on("cut", function(){
alert(this.value.substring(this.selectionStart, this.selectionEnd));
})
值得注意的是,bind
在jQuery中被弃用,你应该改用on
。尝试代码段:
$("textarea").on("cut", function() {
alert(this.value.substring(this.selectionStart, this.selectionEnd));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea></textarea>
我认为起初剪贴板事件会有剪裁的文本,但似乎没有,所以我尝试找到输入的选择相关属性并找到了它。
引用是HTMLInputElement。
此代码的工作原理是假定您的$("#editor")
是input
或textarea
。
$("#editor").bind({
cut:function(e){
console.log('Cut Detected');
var $this = $(this);
var selectStart = this.selectionStart;
var selectionEnd = this.selectionEnd;
var clippedValue = $this.val().slice(selectStart, selectionEnd);
// Now you have the clipped value, do whatever you want with the
// value.
alert(clippedValue);
}
});
对于内容丰富的作品,您可以这样做,我刚刚从用户选择的文本和 MDN 中返回 HTML 中找到了信息
$("#myTa").on("cut", function(e){
// Seems diff bro
var selections = window.getSelection();
var currentSelection = selections.getRangeAt(0);
var start = currentSelection.startOffset;
var end = currentSelection.endOffset;
var selectedContents = currentSelection.toString();
// Do whatever you want.
console.log(start, end);
console.log(selectedContents);
alert(selectedContents);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id='myTa' contenteditable>ask;ndjkasn asdbasj aujs d sdib askjbnsaab asbh mjn a</div>
我已经得到了答案的解决方案。 显然,在我使用的ace编辑器中有一个editor.on('cut',function(e))
editor.on("cut", function(e){
console.log('Cut Detected');
console.log(editor.selection.getRange());
});
相关文章:
- Javascript—如果StartsWith,则查找并剪切
- 使用css跨浏览器动态剪切多边形
- 如何在Javascript中实现剪切、复制和粘贴功能
- 如何'剪切'DOM元素并将其显示在其他位置
- 在javascript中使用正则表达式来剪切子字符串
- 如何在鼠标滚轮滚动上设置剪切遮罩的动画
- 如何在不使用iframe或库的情况下创建剪切显示窗口区域
- 如何在剪切/粘贴/移动后在contentEditable DIV中保留与XML相关的数据
- 如何将剪切/粘贴(通过jsni)方法注册到RichTextArea
- 如何在火狐中使用 iframe execCommand 时启用复制/剪切/粘贴功能
- 当窗口不可见时选择/剪切/粘贴到
- Phonegap 3.2.0 android应用程序后退按钮剪切仅适用于某些页面
- 剪切从数据库中选择的文本
- Jquery正则表达式剪切<脚本>标签
- Eclipse挂起JavaScript文件的复制/剪切
- 为什么控制台在原型中将 e.explicitOriginalTarget.value 显示为在粘贴或剪切事件上设置.js
- 在剪切事件期间获取文本框的值
- 如何使用Angularjs检测文本区域中的复制和剪切事件?
- 复制、剪切和粘贴事件在Opera中不起作用
- 在 ace 编辑器中的“剪切”事件之前触发事件