Tangkap masukan tempel

Saya mencari cara untuk membersihkan input yang saya rekatkan ke browser, apakah ini mungkin dilakukan dengan jQuery?

Saya sudah berhasil sampai sejauh ini:

$(this).live(pasteEventName, function(e) {
 // this is where i would like to sanitize my input
 return false;
}

Sayangnya perkembangan saya menjadi melengking karena masalah "kecil" ini. Saya benar-benar akan membuat saya kemping bahagia jika seseorang bisa mengarahkan saya ke arah yang benar.

OK, hanya bertemu dengan masalah yang sama .. Saya pergi jauh

$('input').on('paste', function () {
  var element = this;
  setTimeout(function () {
    var text = $(element).val();
    // do something with text
  }, 100);
});

Hanya batas waktu kecil hingga .val () func dapat diisi.

E.

Anda benar-benar dapat mengambil nilai langsung dari acara tersebut . Ini agak tumpul bagaimana untuk sampai ke sana.

Kembalikan salah jika Anda tidak ingin melewatinya.

$(this).on('paste', function(e) {

  var pasteData = e.originalEvent.clipboardData.getData('text')

});

Untuk kompatibilitas lintas platform, harus menangani peristiwa input dan pertukaran properti:

$ (something).bind ("input propertychange", function (e) {
    // check for paste as in example above and
    // do something
})

Saya semacam memperbaikinya dengan menggunakan kode berikut:

$("#editor").live('input paste',function(e){
    if(e.target.id == 'editor') {
        $('<textarea></textarea>').attr('id', 'paste').appendTo('#editMode');
        $("#paste").focus();
        setTimeout($(this).paste, 250);
    }
});

Sekarang saya hanya perlu menyimpan lokasi tanda sisipan dan menambahkan ke posisi itu maka saya sudah siap ... saya pikir :)

Hmm ... aku pikir Anda bisa menggunakan e.clipboardDatauntuk menangkap data yang disisipkan. Jika tidak berhasil, lihat di sini .

$(this).live("paste", function(e) {
    alert(e.clipboardData); // [object Clipboard]
});

Dengarkan acara tempel dan atur pendengar acara keyup. Pada keyup, ambil nilainya dan hapus pendengar acara keyup.

$('.inputTextArea').bind('paste', function (e){
    $(e.target).keyup(getInput);
});
function getInput(e){
    var inputText = $(e.target).val();
    $(e.target).unbind('keyup');
}

$("#textboxid").on('input propertychange', function () {
    //perform operation
        });

Ini akan bekerja dengan baik.

Ini semakin dekat dengan apa yang Anda inginkan.

function sanitize(s) {
  return s.replace(/\bfoo\b/g, "~"); 
};

$(function() {
 $(":text, textarea").bind("input paste", function(e) {
   try {
     clipboardData.setData("text",
       sanitize(clipboardData.getData("text"))
     );
   } catch (e) {
     $(this).val( sanitize( $(this).val() ) );
   }
 });
});

Harap dicatat bahwa ketika objek clipboardData tidak ditemukan (di browser selain IE), Anda saat ini mendapatkan nilai penuh elemen + nilai clipboard'ed.

Anda mungkin dapat melakukan beberapa langkah tambahan untuk membedakan kedua nilai, sebelum input & setelah input, jika Anda benar-benar hanya setelah data apa yang benar-benar ditempelkan ke dalam elemen.

 $('').bind('input propertychange', function() {....});                      

Ini akan berfungsi untuk acara tempel mouse.

Bagaimana dengan membandingkan nilai asli bidang dan nilai bidang yang diubah dan mengurangi perbedaan sebagai nilai yang ditempelkan? Ini menangkap teks yang disisipkan dengan benar bahkan jika ada teks yang ada di lapangan.

http://jsfiddle.net/6b7sK/

function text_diff(first, second) {
    var start = 0;
    while (start < first.length && first[start] == second[start]) {
        ++start;
    }
    var end = 0;
    while (first.length - end > start && first[first.length - end - 1] == second[second.length - end - 1]) {
        ++end;
    }
    end = second.length - end;
    return second.substr(start, end - start);
}
$('textarea').bind('paste', function () {
    var self = $(this);
    var orig = self.val();
    setTimeout(function () {
        var pasted = text_diff(orig, $(self).val());
        console.log(pasted);
    });
});

Kode ini berfungsi untuk saya, tempel dari klik kanan atau salin tempel langsung

   $('.textbox').on('paste input propertychange', function (e) {
        $(this).val( $(this).val().replace(/[^0-9.]/g, '') );
    })

Ketika saya tempel Section 1: Labour Costitu menjadi 1dalam kotak teks.

Untuk mengizinkan hanya nilai float, saya menggunakan kode ini

 //only decimal
    $('.textbox').keypress(function(e) {
        if(e.which == 46 && $(this).val().indexOf('.') != -1) {
            e.preventDefault();
        } 
       if (e.which == 8 || e.which == 46) {
            return true;
       } else if ( e.which < 48 || e.which > 57) {
            e.preventDefault();
      }
    });

document.addEventListener('paste', function(e){
    if(e.clipboardData.types.indexOf('text/html') > -1){
        processDataFromClipboard(e.clipboardData.getData('text/html'));
        e.preventDefault();

        ...
    }
});

Lebih lanjut:

• API Clipboard dan acara

Lihat contoh ini: http://www.p2e.dk/diverse/detectPaste.htm

Ini penting melacak setiap perubahan dengan peristiwa input dan kemudian memeriksa apakah itu tempel dengan perbandingan string. Oh, dan di IE ada acara onpaste. Begitu:

$ (something).bind ("input paste", function (e) {
    // check for paste as in example above and
    // do something
})

Metode ini menggunakan konten jqueries (). Unwrap ().

1. Pertama, deteksi acara tempel
2. Tambahkan kelas unik ke tag yang sudah ada di elemen tempat kami menempelkan.

3. Setelah batas waktu tertentu, pindai semua konten yang membuka tag yang tidak memiliki kelas yang Anda atur sebelumnya. Catatan: Metode ini tidak menghapus tag penutup sendiri seperti
   Lihat contoh di bawah ini.

   //find all children .find('*') and add the class .within .addClass("within") to all tags
   $('#answer_text').find('*').each(function () {
   $(this).addClass("within");
   });
   setTimeout(function() {
   $('#answer_text').find('*').each(function () {
       //if the current child does not have the specified class unwrap its contents
       $(this).not(".within").contents().unwrap();
   });
   }, 0);

Ini terbukti sangat ilusi. Nilai input tidak diperbarui sebelum eksekusi kode di dalam fungsi tempel acara. Saya mencoba memanggil acara lain dari dalam fungsi tempel acara, tetapi nilai input masih belum diperbarui dengan teks yang disisipkan di dalam fungsi acara apa pun. Itu semua peristiwa terlepas dari keyup. Jika Anda memanggil keyup dari dalam fungsi tempel acara, Anda dapat membersihkan teks yang disisipkan dari dalam fungsi event keyup. seperti itu ...

$(':input').live
(
    'input paste',
    function(e)
    {
        $(this).keyup();
    }
);

$(':input').live
(
    'keyup',
    function(e)
    {
        // sanitize pasted text here
    }
);

Ada satu peringatan di sini. Di Firefox, jika Anda mengatur ulang teks input pada setiap keyup, jika teks lebih panjang dari area yang dapat dilihat yang diizinkan oleh lebar input, maka mengatur ulang nilai pada setiap keyup akan merusak fungsionalitas browser yang secara otomatis menggulirkan teks ke posisi caret di akhir teks. Alih-alih, teks bergulir kembali ke awal meninggalkan tanda sisipan.

Skrip untuk menghapus karakter khusus dari semua bidang dengan kelas portlet-form-input-field:

// Remove special chars from input field on paste
jQuery('.portlet-form-input-field').bind('paste', function(e) {
    var textInput = jQuery(this);
    setTimeout(function() {
        textInput.val(replaceSingleEndOfLineCharactersInString(textInput.val()));
    }, 200);
});

function replaceSingleEndOfLineCharactersInString(value) {
    <%
        // deal with end-of-line characters (\n or \r\n) that will affect string length calculation,
        // also remove all non-printable control characters that can cause XML validation errors
    %>
    if (value != "") {
        value = value.replace(/(\x00|\x01|\x02|\x03|\x04|\x05|\x06|\x07|\x08|\x0B|\x0C|\x0E|\x0F|\x10|\x11|\x12|\x13|\x14|\x15|\x16|\x17|\x18|\x19|\x1A|\x1B|\x1C|\x1D|\x1E|\x1F|\x7F)/gm,'');
        return value = value.replace(/(\r\n|\n|\r)/gm,'##').replace(/(\#\#)/gm,"\r\n");
    }
}

Ada satu peringatan di sini. Di Firefox, jika Anda mengatur ulang teks input pada setiap keyup, jika teks lebih panjang dari area yang dapat dilihat yang diizinkan oleh lebar input, maka mengatur ulang nilai pada setiap keyup akan merusak fungsionalitas browser yang secara otomatis menggulirkan teks ke posisi caret di akhir teks. Alih-alih, teks bergulir kembali ke awal meninggalkan tanda sisipan.

function scroll(elementToBeScrolled) 
{
     //this will reset the scroll to the bottom of the viewable area. 
     elementToBeScrolled.topscroll = elementToBeScrolled.scrollheight;
}