कैच पेस्ट इनपुट

210

मैं इनपुट को सैनिटाइज़ करने का एक तरीका ढूंढ रहा हूं जिसे मैं ब्राउज़र में पेस्ट करता हूं, क्या यह jQuery के साथ करना संभव है?

मैं अब तक इसके साथ आने में कामयाब रहा हूं:

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

दुर्भाग्य से मेरा विकास इस "मामूली" मुद्दे की वजह से एक विकराल रूप धारण कर चुका है। मैं वास्तव में मुझे एक खुश कैम्पर बनाऊंगा अगर कोई मुझे सही दिशा में ले जा सके।

jquery paste sanitize

— क्रिस्टोफर विंटरकविस्ट
स्रोत

6

एक ही समस्या का अनुभव करने वाले अन्य लोगों के उपयोग के उत्तर के रूप में कृपया stackoverflow.com/a/1503425/749232 पर निशान लगाएँ । यह मेरे लिए हल है।

— साजी 89

2

.live () jquery 1.9 के रूप में पदावनत किया गया है, वे इसके बजाय .on () की सलाह देते हैं

— समीर अलीभाई

stackoverflow.com/a/19269040/530153

— रजत गुप्ता

337

ठीक है, बस एक ही मुद्दे में टकरा गया .. मैं बहुत दूर चला गया

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

बस एक छोटा सा समय तक .val () दुर्गंध आबाद हो सकती है।

इ।

— इवगेनी डिमोव
स्रोत

20

क्या होगा यदि टेक्सटारिया में पहले से ही पाठ है और आप पेस्ट करते हैं, और आप सिर्फ पेस्ट किए गए पाठ को चाहते हैं?

— बर्फ़ून

39

पूरी तरह से काम करता है, धन्यवाद। 0 का टाइमआउट भी काम करता है। फ़ंक्शन को अगले लूप में स्थगित करने की आवश्यकता है।

— डैनियल लुईस

4

बस एक समान स्थिति में था। टाइमआउट होता है क्योंकि पेस्ट इवेंट तत्काल नहीं होता है, लेकिन क्लिपबोर्ड सामग्री को पेस्ट करने के लिए कुछ मिलीसेकंड लगते हैं।

— जेम्स

8

@ user563811: बस ध्यान दें कि HTML5 में आधिकारिक न्यूनतम टाइमआउट 4ms है।

— pimvdb

4

जैसा कि शरीफ कहते हैं, 0ms अभी भी घटना को स्टैक के निचले हिस्से में रखता है।

— बॉबरोड्स

67

आप वास्तव में घटना से सीधे मूल्य हड़प सकते हैं । हालांकि यह कैसे इसे पाने के लिए एक बिट obtuse।

यदि आप इसे से गुजरना नहीं चाहते हैं तो झूठी वापसी करें।

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

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

});

— चार्ल्स हारो
स्रोत

2

यह जाने का रास्ता है

— DdW

1

यानी 11: window.clipboardData.getData ('पाठ')

— Wallstrider

4

हालाँकि, ध्यान दें कि "ओरिजिनल" प्रॉपर्टी की ज़रूरत तभी है जब आप jQuery के साथ ईवेंट को हैंडल कर रहे हों। आप e.clipboardData.getData('text')सीधे सादे जावास्क्रिप्ट में कर सकते हैं ।

— असीर पज़

सबसे अच्छा जवाब यहाँ! लेकिन - मुझे यह अजीब लगा कि बाइंडिंग का शॉर्ट-हैंड संस्करण इस के साथ काम नहीं करता है, अर्थात, यदि मैं यह कोशिश करता हूं, तो त्रुटि: यह (यह) .Paste (फ़ंक्शन (e) {...}) ;, यहां तक कि हालांकि वह शॉर्ट-

— हैंडिंग के

niggle: कोड एक समापन पैरा याद कर रहा है। जाहिरा तौर पर यह परिवर्तन मुझे संपादित करने के रूप में ठीक करने की अनुमति देने के लिए बहुत ही स्माल है।

— जोकिम लूज

42

प्लेटफ़ॉर्म संगतता के लिए, इसे oninput और onpropertychange इवेंट्स को हैंडल करना चाहिए:

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

— ज़ू लिआंगीलियनग
स्रोत

2

सुंदर समाधान जो पेस्ट और कीप ईवेंट पकड़ने दोनों के रूप में काम करता है। नोट: यह ईवेंट फ़ंक्शन को किसी कारण से दो बार आग लगाने का कारण बनता है यदि आप इनपुट सामग्री को हाइलाइट करते हैं और फिर कम से कम IE8 में कुछ टाइप करते हैं (कई मामलों में महत्वपूर्ण नहीं है, लेकिन संभवतः दूसरों में बहुत महत्वपूर्ण है)।

— बैके

अच्छा लगा! मैं इस बारे में नहीं जानता था, और यह पूरी तरह से मेरी जरूरतों के अनुरूप है!

— मार्क ब्रिलॉल्ट

18

मैं निम्नलिखित कोड का उपयोग करके इसे ठीक करता हूं:

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

अब मुझे बस कैरट लोकेशन को स्टोर करने और उस पोजीशन को जोड़ने की जरूरत है, फिर मैं पूरी तरह तैयार हूं ... मुझे लगता है :)

— क्रिस्टोफर विंटरकविस्ट
स्रोत

1

आपने कैरट लोकेशन को कैसे स्टोर किया?

— पेटा

@Petah आप जाँच सकते हैं कि किस तत्व के साथ ध्यान केंद्रित है .find(':focus'), और उस तत्व को जानने से इसके लिए कार्य स्थान निर्धारित होता है। देखें इस ।

— जैकब

याद रखें कि "लाइव" को "ऑन" के पक्ष में

— चित्रित किया

inputफर्क पड़ता है :) मैं आम तौर पर मेरे टेक्स्टबॉक्स घटनाओं में ये है, keyup keydown paste inputलेकिन स्पष्ट रूप से निर्भर करता है कि आपके इरादे क्या हैं

— पियरे

10

हम्म ... मुझे लगता है कि आप e.clipboardDataडेटा को चिपकाया जा सकता है। यदि यह पैन नहीं करता है, तो यहां देखें ।

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

— Moff
स्रोत

2

जब मैं इसे सफ़ारी में चलाता हूँ तो मुझे 'अपरिभाषित' मिलता है :(

— क्रिस्टोफ़र विंटरकविस्ट

1

क्लिपबोर्डडॉटा अधिकांश ब्राउज़रों (स्पष्ट सुरक्षा छेद) पर सैंडबॉक्स किया गया है

— पॉडपर्सन

2

केवल इंटरनेट एक्सप्लोरर!

— Lodewijk

9

पेस्ट इवेंट के लिए सुनें और की-अप इवेंट श्रोता सेट करें। Keyup पर, value को कैप्चर करें और keyup इवेंट श्रोता को हटा दें।

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

— एरिक
स्रोत

6

यह बहुत अच्छा है, लेकिन यह राइट क्लिक पेस्टिंग के लिए काम नहीं करता है।

— जोसेफ रेवेनवॉल्फ

न तो यह मध्य-क्लिक पेस्टिंग (X11) के लिए काम करता है यह केवल तभी काम करता है जब उन्होंने कीबोर्ड का उपयोग पेस्ट करने के लिए किया हो।

— जैसें

7

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

यह ठीक काम करेगा।

— रजत जैन
स्रोत

6

यह आप क्या चाहते हो सकता है के करीब हो रही है।

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) तो आपको वर्तमान में तत्व का पूरा मूल्य + क्लिपबोर्ड का मूल्य मिल रहा है।

आप शायद इनपुट के पहले और इनपुट के बाद, दो मानों को अलग करने के लिए कुछ अतिरिक्त कदम उठा सकते हैं, अगर आप वास्तव में केवल उस डेटा के बाद तत्व में चिपके हुए हैं जो वास्तव में हैं।

— मिस्टर लकी
स्रोत

6

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

यह माउस पेस्ट इवेंट के लिए काम करेगा।

— अभिराम
स्रोत

2

यह सभी का सबसे अच्छा उपयोग है।

— सिनान एल्डेम

5

फ़ील्ड के मूल मूल्य और फ़ील्ड के परिवर्तित मूल्य की तुलना करने और पेस्ट किए गए मान के अंतर को घटाने के बारे में कैसे? यह चिपके हुए पाठ को सही ढंग से पकड़ता है भले ही क्षेत्र में मौजूदा पाठ हो।

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

— आलोक सर्व
स्रोत

5

यह कोड मेरे लिए राइट क्लिक या सीधे कॉपी पेस्ट से पेस्ट करने के लिए काम कर रहा है

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

— आरएन कुशवाहा
स्रोत

4

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

        ...
    }
});

आगे की:

क्लिपबोर्ड एपीआई और ईवेंट

— davidcondrey
स्रोत

पाठ / HTML मान्य नहीं है, केवल यूआरएल और पाठ है।

— माइक

@ माइक मैंने स्निपेट को संदर्भित दस्तावेज़ से सीधे कॉपी किया था।

— डेविडकॉन्ड्रे

मैंने लगभग एक दिन यह कोशिश की। पाठ / html कभी काम नहीं करेगा। मैंने 0 विलम्ब की समयावधि जोड़ते हुए समाप्त कर दिया और html को उस div से हथियाने में सक्षम था जहाँ वे अंदर चिपक रहे थे। यदि किसी के पास एक काम करने वाला फ़िडल होता जो मदद करता। हो सकता है कि यह सिर्फ गलत कर रहा हो ...

— माइक

3

इस उदाहरण को देखें: 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
})

— इल्या बिरमन
स्रोत

तो जब घटना होती है तो पेस्ट टेक्स्ट प्राप्त करना असंभव है?

— क्रिस्टोफर विंटरविस्ट

खैर, मुझे लगता है कि आपको खुद से निपटना होगा, जैसे, पहले और बाद की तुलना करना। बल्कि आसान होना चाहिए। लेकिन आप सिर्फ पूरे इनपुट को ही क्यों नहीं अमान्य करते हैं? धीरे?

— इल्या बिरमान

मैंने सोचा था कि ऐसा करना संभव होगा, लेकिन मुझे लगता है कि नहीं, अभी मैं इसे एक textarea में पेस्ट करके और फिर इसे अपने अंतिम गंतव्य पर स्थानांतरित करके एक और तरीका आज़मा रहा हूं। मुझे उम्मीद है कि काम करेगा।

— क्रिस्टोफर विंटरविस्ट

आपको बस दो तारों की शुरुआत (पहले और बाद) में अधिकतम मिलान टुकड़ा ढूंढना होगा। वहाँ से और लंबाई अंतर तक सब कुछ पेस्ट किया हुआ पाठ है।

— इल्या बिरमान

@IlyaBirman नहीं यह नहीं है: उदाहरण के लिए चिपकाया पाठ मूल के भाग (या सभी) की जगह ले सकता है

— जैसन

1

यह विधि jqueries सामग्री () का उपयोग करती है।

सबसे पहले, पेस्ट इवेंट का पता लगाएं
उन टैग्स में एक अद्वितीय वर्ग जोड़ें जो पहले से ही उस तत्व में हैं जिसमें हम पेस्ट कर रहे हैं।
दिए गए टाइमआउट स्कैन के बाद उन सभी सामग्रियों को हटा दें, जो आपके द्वारा पहले सेट किए गए वर्ग के पास नहीं हैं। नोट: यह विधि स्वयं समापन टैग को नहीं हटाती है जैसे
नीचे एक उदाहरण देखें।
```
//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);
```

— शाद्रैक बी। ओरिना
स्रोत

निश्चित रूप से सबसे अच्छा, सबसे छोटा और स्वयं बोलने वाला उत्तर कभी देखा गया !!! बहुत बहुत धन्यवाद, आपने मेरा दिन बनाया;)

— वेबप्रोग्रामर

0

यह काफी भ्रामक साबित हुआ। पेस्ट इवेंट फ़ंक्शन के अंदर कोड के निष्पादन से पहले इनपुट का मूल्य अपडेट नहीं किया जाता है। मैंने पेस्ट इवेंट फंक्शन के भीतर से अन्य इवेंट्स को कॉल करने की कोशिश की, लेकिन इनपुट वैल्यू अभी भी किसी भी इवेंट के फंक्शन के अंदर पेस्ट किए गए टेक्स्ट के साथ अपडेट नहीं है। यह कीप के अलावा सभी घटनाएँ हैं। यदि आप पेस्ट इवेंट फ़ंक्शन के भीतर से कीप को कॉल करते हैं, तो आप कीप इवेंट फ़ंक्शन के भीतर से पेस्ट किए गए पाठ को पवित्र कर सकते हैं। इस तरह...

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

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

यहां एक कैविएट है। फ़ायरफ़ॉक्स में, यदि आप प्रत्येक कीप पर इनपुट पाठ को रीसेट करते हैं, यदि पाठ इनपुट चौड़ाई द्वारा अनुमत दृश्य क्षेत्र से अधिक है, तो हर कीप पर मान रीसेट करने से ब्राउज़र कार्यक्षमता को तोड़ता है जो पाठ को कैरेट स्थिति में स्क्रॉल करता है। पाठ का अंत। इसके बजाय पाठ शुरुआत को ध्यान से बाहर छोड़ते हुए शुरुआत में स्क्रॉल करता है।

सामग्री में पेस्ट किए जाने से पहले ऑनस्पैस्ट को बुलाया जाता है। पेस्ट के परिणामों को धोने के लिए आपको अपना स्वयं का फ़ंक्शन बनाने के लिए कम से कम 4ms की समयबद्ध देरी की आवश्यकता होती है।

— ड्रैगनलॉर्ड

-1

क्लास पोर्टलेट-फॉर्म-इनपुट-फील्ड के साथ सभी क्षेत्रों से विशेष वर्णों को हटाने के लिए स्क्रिप्ट:

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

— कुक को एलेक्स
स्रोत

2

क्या आप कृपया संबंधित स्वच्छता के विवरण को जोड़ सकते हैं और यह पोस्टर के मुद्दे को हल करने में मदद क्यों कर सकता है? बस एक कोड ब्लॉक प्रदान करने से वास्तव में ओपी (या भविष्य के खोजकर्ता) को यह समझने में मदद नहीं मिलती है कि समस्या को कैसे हल किया जाए - यह सिर्फ गलत कोड को कॉपी / पेस्ट करने को प्रोत्साहित करता है।

— ट्रॉय अल्फोर्ड

-2

यहां एक कैविएट है। फ़ायरफ़ॉक्स में, यदि आप प्रत्येक कीप पर इनपुट पाठ को रीसेट करते हैं, यदि पाठ इनपुट चौड़ाई द्वारा अनुमत दृश्य क्षेत्र से अधिक है, तो हर कीप पर मान रीसेट करने से ब्राउज़र कार्यक्षमता को तोड़ता है जो पाठ को कैरेट स्थिति में स्क्रॉल करता है। पाठ का अंत। इसके बजाय पाठ शुरुआत को ध्यान से बाहर छोड़ते हुए शुरुआत में स्क्रॉल करता है।

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

— lordcheeto
स्रोत