จับแปะ

ฉันกำลังมองหาวิธีในการฆ่าเชื้อการป้อนข้อมูลที่ฉันวางลงในเบราว์เซอร์นี้เป็นไปได้ที่จะทำกับ jQuery?

ฉันจัดการที่จะเกิดขึ้นกับเรื่องนี้:

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

น่าเสียดายที่การพัฒนาของฉันมาถึงการระงับการร้องเสียงกรี๊ดเนื่องจากปัญหา "รองลงมา" นี้ ฉันจะทำให้ฉันเป็นนักออกค่ายที่มีความสุขจริงๆถ้ามีคนสามารถชี้ให้ฉันไปในทิศทางที่ถูกต้อง

ตกลงเพิ่งเจอปัญหาเดียวกัน .. ฉันไปไกล

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

เพียงแค่หมดเวลาเล็กน้อยจนถึง. val () func สามารถรับข้อมูลได้

อี

คุณสามารถคว้าค่าได้โดยตรงจากเหตุการณ์เหตุการณ์มันค่อนข้างป้านวิธีไปถึงแม้ว่า

กลับเท็จถ้าคุณไม่ต้องการให้มันผ่านไป

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

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

});

สำหรับความเข้ากันได้ของแพลตฟอร์มข้ามควรจัดการกับอินพุตและเหตุการณ์ onpropertychange:

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

ฉันจัดเรียงของคงที่โดยใช้รหัสต่อไปนี้:

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

ตอนนี้ฉันเพียงแค่ต้องเก็บตำแหน่งตัวชี้และต่อท้ายตำแหน่งนั้นฉันพร้อมแล้ว ... ฉันคิดว่า :)

อืม ... ฉันคิดว่าคุณสามารถใช้e.clipboardDataเพื่อจับข้อมูลที่ถูกวาง ถ้ามันไม่ได้เลื่อนออกได้ดูที่นี่

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

ฟังเหตุการณ์การวางและตั้งค่าฟังเหตุการณ์ keyup บน keyup ให้ดักจับค่าและลบตัวฟังเหตุการณ์ 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
        });

มันจะทำงานได้ดี

นี่คือการใกล้ชิดกับสิ่งที่คุณอาจต้องการ

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() ) );
   }
 });
});

โปรดทราบว่าเมื่อไม่พบวัตถุคลิปบอร์ดข้อมูล (ในเบราว์เซอร์อื่น ๆ จากนั้น IE) คุณกำลังรับค่าเต็มขององค์ประกอบ + ค่าคลิปบอร์ด

คุณสามารถทำขั้นตอนพิเศษบางอย่างเพื่อให้ทั้งสองค่าต่างกันก่อนอินพุต & หลังอินพุตหากคุณเป็นจริงหลังจากข้อมูลที่ถูกวางลงในองค์ประกอบอย่างแท้จริงเท่านั้น

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

สิ่งนี้จะใช้ได้กับเหตุการณ์การวางเมาส์

วิธีการเกี่ยวกับการเปรียบเทียบมูลค่าเดิมของสนามและค่าที่เปลี่ยนแปลงของสนามและหักส่วนต่างเป็นค่าที่วาง สิ่งนี้จะจับข้อความที่วางอย่างถูกต้องแม้ว่าจะมีข้อความที่มีอยู่ในฟิลด์

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);
    });
});

รหัสนี้ใช้งานได้สำหรับฉันอย่างใดอย่างหนึ่งวางจากคลิกขวาหรือวางคัดลอกโดยตรง

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

เมื่อฉันวางSection 1: Labour Costมันจะกลายเป็น1ในกล่องข้อความ

เพื่ออนุญาตเฉพาะค่าลอยฉันใช้รหัสนี้

 //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();

        ...
    }
});

เพิ่มเติม:

• API คลิปบอร์ดและกิจกรรม

ดูตัวอย่างนี้: http://www.p2e.dk/diverse/detectPaste.htm

มันจำเป็นติดตามทุกการเปลี่ยนแปลงด้วยเหตุการณ์ oninput แล้วตรวจสอบว่าเป็นการวางโดยการเปรียบเทียบสตริง โอ้และใน IE มีกิจกรรม onpaste ดังนั้น:

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

วิธีนี้ใช้เนื้อหา jqueries (). unwrap ()

1. ก่อนอื่นให้ตรวจสอบเหตุการณ์การวาง
2. เพิ่มคลาสเฉพาะลงในแท็กที่มีอยู่แล้วในองค์ประกอบที่เรากำลังวาง

3. หลังจากหมดเวลาที่กำหนดให้สแกนเนื้อหาทั้งหมดที่แกะแท็กที่ไม่มีคลาสที่คุณตั้งไว้ก่อนหน้านี้ หมายเหตุ: วิธีนี้จะไม่ลบแท็กปิดตัวเองเช่น
   ดูตัวอย่างด้านล่าง

   //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);

สิ่งนี้พิสูจน์แล้วว่าไม่เหมาะสม ค่าของอินพุตไม่ถูกอัพเดตก่อนการเรียกใช้โค้ดภายในฟังก์ชันวางเหตุการณ์ ฉันพยายามเรียกกิจกรรมอื่น ๆ จากภายในฟังก์ชั่นการวางเหตุการณ์ แต่ค่าอินพุตยังไม่ได้รับการปรับปรุงด้วยข้อความที่วางอยู่ภายในฟังก์ชั่นของกิจกรรมใด ๆ นั่นคือเหตุการณ์ทั้งหมดนอกเหนือจากการกดปุ่ม หากคุณเรียกใช้การกดปุ่มจากภายในฟังก์ชั่นการวางเหตุการณ์คุณสามารถฆ่าเชื้อข้อความที่วางจากภายในฟังก์ชั่นการจัดเรียงเหตุการณ์ อย่างนั้น ...

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

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

มีข้อแม้หนึ่งข้ออยู่ที่นี่ ใน Firefox หากคุณรีเซ็ตข้อความอินพุตในทุก ๆ คีย์หากข้อความยาวเกินกว่าพื้นที่ที่สามารถดูได้ที่ความกว้างของอินพุตอนุญาตให้รีเซ็ตค่าในทุก ๆ คีย์คีย์จะทำลายฟังก์ชันการทำงานของเบราว์เซอร์ที่เลื่อนข้อความไปยังตำแหน่งคาเร็ตอัตโนมัติ ท้ายข้อความ แต่ข้อความเลื่อนกลับไปที่จุดเริ่มต้นทำให้เครื่องหมายรูปหมวกไม่อยู่ในมุมมอง

สคริปต์เพื่อลบอักขระพิเศษจากฟิลด์ทั้งหมดที่มีคลาส 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");
    }
}

มีข้อแม้หนึ่งข้ออยู่ที่นี่ ใน Firefox หากคุณรีเซ็ตข้อความอินพุตในทุก ๆ คีย์หากข้อความยาวเกินกว่าพื้นที่ที่สามารถดูได้ที่ความกว้างของอินพุตอนุญาตให้รีเซ็ตค่าในทุก ๆ คีย์คีย์จะทำลายฟังก์ชันการทำงานของเบราว์เซอร์ที่เลื่อนข้อความไปยังตำแหน่งคาเร็ตอัตโนมัติ ท้ายข้อความ แต่ข้อความเลื่อนกลับไปที่จุดเริ่มต้นทำให้เครื่องหมายรูปหมวกไม่อยู่ในมุมมอง

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