JavaScript 在所选文本上粘贴事件
JavaScript paste event on selected text
问题:
我想通过粘贴格式化传入的文本,但我采用的方法只允许替换现有文本或添加到现有文本,因此选定的文本是完整的。
那么如何在粘贴事件中获取选定的文本。
我不关心跨浏览器支持。
它应该是什么样子:
- 文本区域内的文本:aa 12 56 99<-选定的文本
- clipboard:56abccda6
中的文本
- 文本output:aa 15 6a bc cda6
JavaScript/jquery
$(document).ready(function(){
function isHex(h) {
let a = parseInt(h,16);
return (a.toString(16) ===h.toLowerCase())
}
function formatText(text) {
if(isHex(text)){
let splitedText = text.match(/[\s\S]{1,2}/g) || [];
splitedText = splitedText.join(' ');
return splitedText;
}
return text;
}
$('textarea[name=plainText]').on('paste', function(event) {
let formatedText = formatText(event.originalEvent.clipboardData.getData('text'));
$(this).val($(this).val() + formatedText);
//or
// $(this).val(formatedText);
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea placeholder="Message" name="plainText" id="plainText" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Message'"></textarea>
http://code.google.com/p/rangyinputs
$(document).ready(function(){
$('textarea[name=plainText]').on('paste', function(event) {
let formatedText =
formatText(event.originalEvent.clipboardData.getData('text'));
$("#plainText").replaceSelectedText(formatedText);
return false;
})
});
问题:
我想通过粘贴格式化传入的文本,但我采用的方法只允许替换现有文本或添加到现有文本,因此选定的文本是完整的。
那么如何在粘贴事件中获取选定的文本。
我不关心跨浏览器支持。
它应该是什么样子:
- 文本区域内的文本:aa 12 56 99<-选定的文本
- clipboard:56abccda6 中的文本
- 文本output:aa 15 6a bc cda6
JavaScript/jquery
$(document).ready(function(){
function isHex(h) {
let a = parseInt(h,16);
return (a.toString(16) ===h.toLowerCase())
}
function formatText(text) {
if(isHex(text)){
let splitedText = text.match(/[\s\S]{1,2}/g) || [];
splitedText = splitedText.join(' ');
return splitedText;
}
return text;
}
$('textarea[name=plainText]').on('paste', function(event) {
let formatedText = formatText(event.originalEvent.clipboardData.getData('text'));
$(this).val($(this).val() + formatedText);
//or
// $(this).val(formatedText);
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea placeholder="Message" name="plainText" id="plainText" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Message'"></textarea>
http://code.google.com/p/rangyinputs
$(document).ready(function(){
$('textarea[name=plainText]').on('paste', function(event) {
let formatedText =
formatText(event.originalEvent.clipboardData.getData('text'));
$("#plainText").replaceSelectedText(formatedText);
return false;
})
});