Bắt đầu vào dán

Tôi đang tìm cách vệ sinh đầu vào mà tôi dán vào trình duyệt, điều này có thể thực hiện được với jQuery không?

Tôi đã xoay sở để đưa ra điều này cho đến nay:

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

Thật không may, sự phát triển của tôi đã bị đình trệ vì vấn đề "nhỏ" này. Tôi thực sự sẽ làm cho tôi một người cắm trại hạnh phúc nếu ai đó có thể chỉ cho tôi đi đúng hướng.

OK, chỉ gặp phải vấn đề tương tự .. Tôi đã đi một chặng đường dài

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

Chỉ cần một khoảng thời gian chờ nhỏ cho đến khi .val () func có thể được điền.

E

Bạn thực sự có thể lấy giá trị trực tiếp từ sự kiện . Nó hơi khó hiểu làm thế nào để có được nó mặc dù.

Trả về false nếu bạn không muốn nó đi qua.

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

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

});

Để tương thích đa nền tảng, cần xử lý các sự kiện oninput và onpropertychange:

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

Tôi sắp xếp nó bằng cách sử dụng đoạn mã sau:

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

Bây giờ tôi chỉ cần lưu trữ vị trí caret và nối vào vị trí đó thì tôi đã sẵn sàng ... Tôi nghĩ :)

Hmm ... Tôi nghĩ rằng bạn có thể sử dụng e.clipboardDatađể bắt dữ liệu được dán. Nếu nó không pan ra, hãy xem ở đây .

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

Nghe sự kiện dán và thiết lập trình nghe sự kiện keyup. Trên keyup, nắm bắt giá trị và loại bỏ trình nghe sự kiện 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
        });

Nó sẽ hoạt động tốt.

Điều này đang tiến gần hơn đến những gì bạn có thể muốn.

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

Xin lưu ý rằng khi không tìm thấy đối tượng clipboardData (trên các trình duyệt khác IE), bạn hiện đang nhận được giá trị đầy đủ của phần tử + giá trị của bảng tạm.

Bạn có thể có thể thực hiện một số bước bổ sung để khác biệt hai giá trị, trước đầu vào & sau đầu vào, nếu bạn thực sự chỉ sau khi dữ liệu thực sự được dán vào thành phần.

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

Điều này sẽ làm việc cho sự kiện dán chuột.

Làm thế nào về việc so sánh giá trị ban đầu của trường và giá trị thay đổi của trường và khấu trừ chênh lệch như giá trị dán? Điều này bắt văn bản được dán chính xác ngay cả khi có văn bản hiện có trong trường.

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

Mã này đang hoạt động đối với tôi hoặc dán từ nhấp chuột phải hoặc dán sao chép trực tiếp

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

Khi tôi dán Section 1: Labour Costnó trở thành 1trong hộp văn bản.

Để chỉ cho phép giá trị float tôi sử dụng mã này

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

        ...
    }
});

Thêm nữa:

• API Clipboard và các sự kiện

Xem ví dụ này: http://www.p2e.dk/diverse/detectPaste.htmlm

Nó cần thiết theo dõi mọi thay đổi với sự kiện oninput và sau đó kiểm tra xem đó có phải là dán bằng cách so sánh chuỗi hay không. Ồ, và trong IE có một sự kiện onpaste. Vì thế:

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

Phương pháp này sử dụng nội dung jqueries (). Unrap ().

1. Đầu tiên, phát hiện sự kiện dán
2. Thêm một lớp duy nhất vào các thẻ đã có trong phần tử mà chúng ta đang dán.

3. Sau khi hết thời gian, hãy quét qua tất cả các thẻ hủy ghép nội dung không có lớp mà bạn đã đặt trước đó. Lưu ý: Phương pháp này không xóa các thẻ tự đóng như
   Xem ví dụ bên dưới.

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

Điều này tỏ ra khá ảo tưởng. Giá trị của đầu vào không được cập nhật trước khi thực thi mã bên trong chức năng dán sự kiện. Tôi đã thử gọi các sự kiện khác từ bên trong chức năng dán sự kiện nhưng giá trị đầu vào vẫn không được cập nhật với văn bản được dán bên trong chức năng của bất kỳ sự kiện nào. Đó là tất cả các sự kiện ngoài keyup. Nếu bạn gọi keyup từ bên trong chức năng sự kiện dán, bạn có thể vệ sinh văn bản đã dán từ bên trong chức năng sự kiện keyup. như vậy ...

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

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

Có một cảnh báo ở đây. Trong Firefox, nếu bạn đặt lại văn bản đầu vào trên mỗi lần gõ phím, nếu văn bản dài hơn vùng có thể xem được cho phép bởi chiều rộng đầu vào, thì việc đặt lại giá trị trên mỗi lần khóa sẽ phá vỡ chức năng trình duyệt tự động cuộn văn bản đến vị trí dấu mũ ở cuối văn bản. Thay vào đó, văn bản cuộn trở lại từ đầu để lại dấu mũ.

Tập lệnh để loại bỏ các ký tự đặc biệt khỏi tất cả các trường với lớp 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");
    }
}

Có một cảnh báo ở đây. Trong Firefox, nếu bạn đặt lại văn bản đầu vào trên mỗi lần gõ phím, nếu văn bản dài hơn vùng có thể xem được cho phép bởi chiều rộng đầu vào, thì việc đặt lại giá trị trên mỗi lần khóa sẽ phá vỡ chức năng trình duyệt tự động cuộn văn bản đến vị trí dấu mũ ở cuối văn bản. Thay vào đó, văn bản cuộn trở lại từ đầu để lại dấu mũ.

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