web-dev-qa-db-ja.com

jquery貼り付けられたコンテンツを取得する方法

貼り付けたテキストを入力に取り込むのに少し苦労します。

 <input type="text" id="myid" val="default">
 $('#myid').on('paste',function(){
        console.log($('#myid').val());
 });

console.logの表示：

default

貼り付けたテキストをcatchして使用する準備をする方法は？

jquerypaste
28
greenbandit

入力値が更新される前にpasteイベントがトリガーされるため、解決策は次のいずれかです。

  1. クリップボードのデータは、正確にその時点で入力に貼り付けられているデータと確実に同じになるため、代わりにクリップボードからデータをキャプチャします。

  2. 値hasがタイマーを使用して更新されるまで待ちます

幸いなことに、最初の回答が投稿されてから数年後、現在のほとんどのブラウザーは、クリップボードからデータをキャプチャするためのはるかにエレガントなソリューションである素晴らしい Clipboard API をサポートしています。

Clipboard APIをサポートしていないブラウザの場合、信頼性の低いevent.clipboardDataブラウザでサポートされているバージョンがある場合、それを確認する場合。

入力値が更新されるまで遅延するタイマーを使用する最終フォールバックとして、すべてのブラウザーで機能し、これが真のクロスブラウザーソリューションになります。

すべてを処理する便利な関数を作成しました

function catchPaste(evt, elem, callback) {
  if (navigator.clipboard && navigator.clipboard.readText) {
    // modern approach with Clipboard API
    navigator.clipboard.readText().then(callback);
  } else if (evt.originalEvent && evt.originalEvent.clipboardData) {
    // OriginalEvent is a property from jQuery, normalizing the event object
    callback(evt.originalEvent.clipboardData.getData('text'));
  } else if (evt.clipboardData) {
    // used in some browsers for clipboardData
    callback(evt.clipboardData.getData('text/plain'));
  } else if (window.clipboardData) {
    // Older clipboardData version for Internet Explorer only
    callback(window.clipboardData.getData('Text'));
  } else {
    // Last resort fallback, using a timer
    setTimeout(function() {
      callback(elem.value)
    }, 100);
  }
}

// to be used as 

$('#myid').on('paste', function(evt) {
  catchPaste(evt, this, function(clipData) {
    console.log(clipData);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="myid" />

クリップボードからデータを取得すると、貼り付けられたテキストのみが取得され、入力値が更新されるのを待つことが、新しく貼り付けられたテキストを含む入力の値全体を実際に取得する唯一のソリューションです。

39
adeneo

受け入れられた答えは、実際にはハックでugいもので、stackoverflowの貼り付けイベントで頻繁に提案されているようです。より良い方法は this だと思います

$('#someInput').bind('paste', function(e) {
    var data = e.originalEvent.clipboardData.getData('Text');
    //IE9 Equivalent ==> window.clipboardData.getData("Text");   
});
50
cateyes

全体像として、通常3つのイベントが必要だと思います。

  1. ユーザーが貼り付けたとき
  2. ユーザーが<enter>を押したとき
  3. テキストボックスがフォーカスを失ったとき。

on('input')は必要ありません。キーを押すたびにイベントが発生するからです。

この方法では、1つのイベントユーザーが完了したときをテキストボックスに入力します。

$(document).ready(function () {

            $('#myid').keydown(function (e) {
                var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
                if (key == 13) {
                    e.preventDefault();
                    alert($(this).val());
                }
            }).on("change", function () {
                alert($(this).val());
            }).on("paste", function (e) {
                var _this = this;
                // Short pause to wait for paste to complete
                setTimeout(function () {
                    alert($(_this).val());
                }, 100);
            });
        });
0
mike
$('#myid').on('paste' , function(e){
   get_content(this);
});

function get_content(gelen){
var value_input = $(gelen).val();
document.getElementById("write-value").innerHTML = value_input;
console.log(value_input);
}
input{ width: calc(100% - 16px); padding:8px; font-size:large}
div{ color:red; margin-top:16px; padding:8px; font-size:large}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="myid" onkeyUP="get_content(this)" >

<div id="write-value">
</div>
0
Murat Kezli