Question

javascript/jQuery 如何获得鼠标右键黏贴在input中的值并用alert弹窗显示出来

Answer 1

这个问题主要是监听 onpaste (鼠标右键粘贴或 Ctrl + V)。

如果 input 值为空，那么很简单，在 onpaste 之后获取 input 的值就是被粘贴的内容。

但如果 input 内已经有内容，用户选择在中间部位粘贴，或者选择一部分内容后再粘贴 (替换粘贴)，那实施起来就比较复杂。下面是完整的代码

function getSelectionBoundary(el, start) {
    var property = start ? "selectionStart" : "selectionEnd";
    var originalValue, textInputRange, precedingRange
        , pos, bookmark, isAtEnd;
                       
    if(typeof el[property] == "number") {
        return el[property];
    }
    else if(document.selection && document.selection.createRange) {
        el.focus();
        var range = document.selection.createRange();
        if(range) {
            if(document.selection.type == "Text") {
                range.collapse(!!start);
            }
            originalValue = el.value;
            textInputRange = el.createTextRange();
            precedingRange = el.createTextRange();
            pos = 0;
            bookmark = range.getBookmark();
            textInputRange.moveToBookmark(bookmark);
            if(/[\r\n]/.test(originalValue)) {
                try {
                    range.move("character", 1);
                    isAtEnd = (range.parentElement() != el);
                }
                catch(ex) {
                    isAtEnd = true;
                }
                range.moveToBookmark(bookmark);
                if(isAtEnd) {
                    pos = originalValue.length;
                }
                else {
                    textInputRange.text = " ";
                    precedingRange.setEndPoint("EndToStart",
                        textInputRange);
                    pos = precedingRange.text.length - 1;
                    textInputRange.moveStart("character", -1);
                    textInputRange.text = "";
                }
            }
            else {
                precedingRange.setEndPoint("EndToStart", textInputRange);
                pos = precedingRange.text.length;
            }
            return pos;
        }
    }
    return 0;
}
                       
function getInputSelection(ele) {
    var start = getSelectionBoundary(ele, true),
    end = getSelectionBoundary(ele, false);
    return {
        start: start,
        end: end,
        length: end - start,
        text: ele.value.slice(start, end)
    };
}
                       
function detectPaste(ele, callback) {
    ele.onpaste = function() {
        var sel = getInputSelection(ele);
        var initialLength = ele.value.length;
        window.setTimeout(function() {
            var val = ele.value;
            var pastedTextLength =
                val.length - (initialLength - sel.length);
            var end = sel.start + pastedTextLength;
            callback({
                start: sel.start,
                end: end,
                length: pastedTextLength,
                text: val.slice(sel.start, end),
                replacedText: sel.text
            });
        }, 1);
    };
}

以上都是监听 onpaste 和获取粘贴内容的函数，下面是用法。（如果你只是使用，不需要理解上面代码的内容）

window.onload = function() {
    // 获取要监听的 input 或 textarea
    var content = document.getElementById("content");
              
    // 开始监听，第二个参数为回调函数，返回一个对象，其中包括
    // start: 光标开始位置，end: 粘贴后光标位置
    // length: 粘贴内容的长度，replacedtext: 被替换的内容
    // text: 这个就是被粘贴的内容
    detectPaste(content, function(pasteInfo) {
        alert(pasteInfo.text);
    });
};

<input type="text" id="content" value="" />

Answer 2

粘贴后会触发change事件
通过$(this).val()取出事件触发后input内的值
$('input').on('change',function(){
alert($(this).val());

});

Answer 3

貌似不能把，你只能把用户选择后复制到文本框的值给alert出来，这样是检测文本中值是否变化，变了就弹。

Answer 4

<input id="tt" type="text"/>
如果是这样的话，直接用alert($("#tt").val())就可以了。

Answer 5

try it see see.试试看

$("#input_id").bind('change',function(e){
alert(this.val()) ;

});