পেস্ট ইনপুট ধরুন

Question

আমি ব্রাউজারে আটকানো ইনপুটটি স্যানিটাইজ করার একটি উপায় খুঁজছি, jQuery দিয়ে কি এটি করা সম্ভব?

আমি এখন পর্যন্ত এটি নিয়ে আসতে পেরেছি:

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

দুর্ভাগ্যক্রমে এই "অপ্রাপ্তবয়স্ক" ইস্যুটির কারণে আমার বিকাশ চঞ্চল হয়ে গেছে। যদি কেউ আমাকে সঠিক দিকে নির্দেশ করতে পারে তবে আমি সত্যিই আমাকে একটি খুশি শিবির তৈরি করব।

Comments

একই সমস্যার মুখোমুখি অন্যান্য লোকের ব্যবহারের উত্তর হিসাবে দয়া করে stackoverflow.com/a/1503425/749232 চিহ্নিত করুন । এটা আমার জন্য এটি সমাধান।

— সাজি 89

.live () jquery 1.9 হিসাবে অবচয় করা হয়েছে, তারা সুপারিশ করে .on () এর পরিবর্তে

— সমীর আলিভাই

stackoverflow.com/a/19269040/530153

— রজত গুপ্ত

Answer 1

ঠিক আছে, ঠিক একই ইস্যুতে ধাক্কা খেয়েছে .. আমি অনেকদূর গিয়েছিলাম

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

.Val () ফানকটি পপুলেশন হতে পারে কেবলমাত্র একটি ছোট সময়সীমা।

ই

Comments

যদি পাঠ্যটিতে ইতিমধ্যে পাঠ্য লেখা থাকে এবং আপনি পেস্ট করেন এবং আপনি কেবল আটকানো পাঠ্যটি চান?

— বারফুন

ধন্যবাদ পুরোপুরি কাজ করে। 0 এর সময়সীমা ঠিক পাশাপাশি কাজ করে। ফাংশনটি কেবল পরবর্তী লুপে স্থগিত করা দরকার।

— ড্যানিয়েল লুইস

সবে একইরকম পরিস্থিতিতে পড়েছি। সময়সীমাটি সেখানে আছে কারণ পেস্ট ইভেন্টটি তাত্ক্ষণিকভাবে নয়, তবে ক্লিপবোর্ডের সামগ্রীটি আটকানোতে কয়েক মিলি সেকেন্ড লাগে

— জেমস

@ user563811: কেবলমাত্র নোট করুন যে এইচটিএমএল-তে সরকারী সর্বনিম্ন সময়সীমা 4 মিমি।

— pimvdb

শরিফের মত, 0 মিমি এখনও ইভেন্টটিকে স্ট্যাকের নীচে রাখে।

— ববরোডস

Answer 2

আপনি ইভেন্ট থেকে সরাসরি মূল্য দখল করতে পারেন । যদিও এটি পেতে কিভাবে এটি একটি সামান্য অবাস্তব।

আপনি যদি এটিটি না যেতে চান তবে মিথ্যা ফিরুন।

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

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

});

Comments

এই পথে যেতে হবে

— DdW

উদাহরণস্বরূপ 11: উইন্ডো .ক্লিপবোর্ডডেটা.জেডডাটা ('পাঠ্য')

— ওয়ালস্ট্রাস্টার

তবে নোট করুন যে আপনি যদি jQuery দিয়ে ইভেন্টটি পরিচালনা করছেন তবে "অরিজিনাল এভেন্ট" সম্পত্তিটির প্রয়োজন কেবল। আপনি কেবল e.clipboardData.getData('text')সাধারণ জাভাস্ক্রিপ্টে করতে পারেন ।

— এশিয়ার পাজ

এখানে সেরা উত্তর! তবে - আমার কাছে এটি বেআইনি মনে হয়েছে যে বাঁধাইয়ের শর্ট হ্যান্ড সংস্করণটি এর সাথে কাজ করে না, অর্থাত্, আমি চেষ্টা করে দেখি ত্রুটি: $ (এটি) .প্যাসেট (ফাংশন (ঙ) {...}); এমনকি যদিও এটি শর্ট-হ্যান্ডিং .on ('ক্লিক') ইত্যাদির জন্য কাজ করে

— হোল্ডঅফহঙ্গার

নিগল: কোডটিতে একটি বন্ধ হওয়া পেরেন অনুপস্থিত। দৃশ্যত পরিবর্তনটি আমার পক্ষে এটিকে সম্পাদনা হিসাবে ঠিক করার অনুমতি দেওয়ার পক্ষে খুব ছোট।

— জোছিম লাউস

Answer 3

ক্রস প্ল্যাটফর্মের সামঞ্জস্যের জন্য, এটি অন ইনপুট এবং অনপ্রেটিটিচেঞ্জ ইভেন্টগুলি পরিচালনা করতে হবে:

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

Comments

সুন্দর সমাধান যা পেস্ট এবং কীআপ ইভেন্ট ক্যাচিং উভয় হিসাবে কাজ করে। দ্রষ্টব্য: যদি আপনি ইনপুট সামগ্রীগুলি হাইলাইট করেন এবং তারপরে কমপক্ষে আইই 8 তে কিছু টাইপ করেন (অনেক ক্ষেত্রে গুরুত্বপূর্ণ নয় তবে অন্যদের মধ্যে সম্ভবত খুব গুরুত্বপূর্ণ) যদি এটি কোনও কারণে ইভেন্ট ফাংশনটিকে দু'বার জ্বালিয়ে তোলে।

— baacke

সুন্দর! আমি এই সম্পর্কে জানতাম না, এবং এটি আমার প্রয়োজনগুলি পুরোপুরি ফিট করে!

— মার্ক ব্রিল্লাট

Answer 4

আমি নিম্নলিখিত কোড ব্যবহার করে বাছাই করেছি:

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

এখন আমাকে কেবল ক্যারেটের অবস্থান সঞ্চয় করতে হবে এবং সেই অবস্থানটিতে সংযোজন করা উচিত তবে আমি সম্পূর্ণ প্রস্তুত ... আমার মনে হয় :)

Comments

আপনি কীভাবে ক্যারেটের অবস্থানটি সঞ্চয় করেছিলেন?

— পেটাহ

@ পিঠা আপনি কোন উপাদানটির সাথে ফোকাস রেখেছেন তা পরীক্ষা করতে পারেন .find(':focus')এবং যে উপাদানটি জানাচ্ছেন এটির জন্য ক্যারেটের অবস্থান নির্ধারণ করে। এই দেখুন ।

— জ্যাকব 10

মনে রাখবেন যে "লাইভ" "অন" এর পক্ষে

— অবহিত করা হয়েছে

inputপার্থক্য তোলে :) আমি সাধারণত আমার পাঠ্যবক্সের ইভেন্টগুলিতে এগুলি করি keyup keydown paste inputতবে আপনার উদ্দেশ্যগুলি কী তা স্পষ্টভাবে নির্ভর করে

— পিয়ের

Answer 5

হুম ... আমি মনে করি আপনি e.clipboardDataআটকানো ডেটা ধরতে ব্যবহার করতে পারেন । এটি যদি প্যান না করে তবে এখানে একবার দেখুন ।

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

Comments

আমি যখন সাফারিতে এটি চালাই আমি '

— অপরিজ্ঞাপিত

ক্লিপবোর্ডাটা বেশিরভাগ ব্রাউজারগুলিতে স্যান্ডবক্সযুক্ত হয় (স্পষ্ট সুরক্ষা গর্ত

— পডপারসন

শুধুমাত্র ইন্টারনেট এক্সপ্লোরার!

— লোডেভিজক

Answer 6

পেস্ট ইভেন্টের জন্য শুনুন এবং একটি কীআপ ইভেন্ট শ্রোতা সেট করুন। কীআপে, মানটি ক্যাপচার করুন এবং কীআপ ইভেন্ট শ্রোতাদের সরান।

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

Comments

এটি খুব ভাল, তবে এটি ডান ক্লিকের আটকানোর জন্য কাজ করে না।

— জোসেফ রেভেনওল্ফ

এটি মধ্য-ক্লিকের পেস্টিং (X11) এর জন্য কাজ করে না কেবল যদি তারা কীবোর্ডটি পেস্ট করতে ব্যবহার করে।

— জেসেন

Answer 7

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

এটা ঠিক কাজ করবে।

Answer 8

এটি আপনার যা চাইবে তার কাছাকাছি চলেছে।

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

দয়া করে মনে রাখবেন যে যখন ক্লিপবোর্ড ডেটা অবজেক্টটি পাওয়া যায় না (তখন অন্য ব্রাউজারগুলিতে) আপনি বর্তমানে উপাদানটির পুরো মান + ক্লিপবোর্ডের মান পাচ্ছেন।

ইনপুট এর আগে এবং ইনপুটটির আগে দুটি মানকে আলাদা করতে আপনি কিছু অতিরিক্ত পদক্ষেপ নিতে পারেন, যদি আপনি সত্যিকার অর্থে কোনও উপাদানটিকে সত্যিকার অর্থে কীভাবে আটকানো হয় তার পরে থাকেন।

Answer 9

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

এটি মাউস পেস্ট ইভেন্টের জন্য কাজ করবে।

Comments

এটি সবার সেরা ব্যবহার।

— সিনান এলডেম

Answer 10

ক্ষেত্রের আসল মান এবং ক্ষেত্রের পরিবর্তিত মানের তুলনা করা এবং আটকানো মান হিসাবে পার্থক্যটি কেটে নেওয়া সম্পর্কে কীভাবে? ক্ষেত্রের বিদ্যমান পাঠ্য থাকলেও এটি আটকানো পাঠ্যটিকে সঠিকভাবে ধরা দেয়।

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

Answer 11

এই কোডটি আমার পক্ষে ডান ক্লিক বা সরাসরি কপির পেস্ট থেকে পেস্ট করছে

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

Answer 12

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

        ...
    }
});

আরও:

• ক্লিপবোর্ডের এপিআই এবং ইভেন্টগুলি

Comments

পাঠ্য / এইচটিএমএল বৈধ নয়, কেবল url এবং পাঠ্য।

— মাইক 15

@ মাইক আমি রেফারেন্সড ডকুমেন্টেশন থেকে স্নিপেটটি সরাসরি অনুলিপি করেছি।

— ডেভিডকন্ড্রে

আমি প্রায় এক দিনের জন্য চেষ্টা করেছিলাম। পাঠ্য / এইচটিএমএল কখনও কাজ করবে না। আমি 0 দেরির একটি সময়সীমা যুক্ত করে শেষ করেছি এবং ডিভটি যেখানে তারা আটকানো হয়েছিল সেখানে থেকে এইচটিএমএল ধরতে সক্ষম হয়েছি someone আমি কেবল এটি ভুল করছি ...

— মাইক

Answer 13

এই উদাহরণটি দেখুন: http://www.p2e.dk/diverse/detectPaste.htm

এটি অনিনপুট ইভেন্টের সাথে প্রতিটি পরিবর্তনকে ট্র্যাক করে এবং তারপরে স্ট্রিং তুলনা করে এটি কোনও পেস্ট হয় কিনা তা পরীক্ষা করে। ওহ, এবং আইইতে একটি অনপ্যাসেট ইভেন্ট রয়েছে। তাই:

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

Comments

সুতরাং ঘটনাটি ঘটে গেলে কেবল পেস্টের পাঠ্য পাওয়া অসম্ভব?

— ক্রিস্টোফার উইন্টারকভিস্ট

ঠিক আছে, আমি অনুমান করি যে আপনাকে এটিকে নিজেই মোকাবেলা করতে হবে, যেমন, আগে এবং পরে তুলনা করুন। এটা বরং সহজ হতে হবে। তবে আপনি কেন পুরো ইনপুটটি পুনরায় বৈজ্ঞানিককরণ করবেন না? মন্থর?

— ইলিয়া বিরমন

আমি কেবল ভেবেছিলাম যে এটি করা সম্ভব হবে তবে আমি অনুমান করি না, এই মুহুর্তে আমি অন্য পদ্ধতিটি টেক্সারিয়াতে আটকানো এবং তার চূড়ান্ত গন্তব্যে স্থানান্তর করে চেষ্টা করছি by আমি আশা করি যে এটি কার্যকর হবে।

— ক্রিস্টোফার উইন্টারকভিস্ট

আপনাকে কেবল দুটি স্ট্রিংয়ের শুরুতে (আগে এবং পরে) সর্বাধিক মিলের খণ্ড খুঁজে পেতে হবে। সেখান থেকে এবং দৈর্ঘ্যের পার্থক্য পর্যন্ত সমস্ত কিছুই আটকানো পাঠ্য।

— ইলিয়া বিরমন

@ ইলিয়া বির্মন এটি নয়: উদাহরণস্বরূপ আটকানো পাঠ্যটি মূলটির অংশ (বা সমস্ত)

— জ্যাসেনের

Answer 14

এই পদ্ধতিতে jqueries সামগ্রী ()। আনপ্রেপ () ব্যবহার করা হয়।

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

Comments

অবশ্যই সবচেয়ে ভাল, সংক্ষিপ্ত এবং স্ব-বক্তৃতা উত্তর দেখা গেছে !!! আপনাকে অনেক ধন্যবাদ, আপনি আমার দিনটি তৈরি করেছেন;)

— ওয়েবপ্রগ্রাম

Answer 15

এটি যথেষ্ট বিভ্রান্তিকর বলে প্রমাণিত হয়েছিল। পেস্ট ইভেন্ট ফাংশনের অভ্যন্তরে কোডটি কার্যকর করার আগে ইনপুটটির মান আপডেট করা হয় না। আমি অন্যান্য ইভেন্টগুলিকে পেস্ট ইভেন্ট ফাংশন থেকে কল করার চেষ্টা করেছি কিন্তু ইনপুট মানটি কোনও ইভেন্টের ফাংশনের ভিতরে আটকানো পাঠ্যের সাথে আপডেট হয় না। এটি কীআপ ব্যতীত সমস্ত ইভেন্ট। আপনি যদি পেস্ট ইভেন্ট ফাংশনটির মধ্য থেকে কীআপ কল করেন তবে আপনি কীআপ ইভেন্ট ফাংশনের মধ্যে থেকে আটকানো পাঠ্যকে স্যানিটাইজ করতে পারেন। তাই ভালো...

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

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

এখানে একটি সতর্কতা আছে। ফায়ারফক্সে, আপনি যদি প্রতিটি কীআপের ইনপুট পাঠ্যটিকে পুনরায় সেট করেন, যদি পাঠ্যটি ইনপুট প্রস্থের দ্বারা অনুমোদিত দর্শনীয় স্থানের চেয়ে দীর্ঘ হয়, তবে প্রতিটি কী-আপের মানটি পুনরায় সেট করা ব্রাউজারের কার্যকারিতাটি ভেঙে দেয় যা পাঠ্যকে ক্যারেটের স্থানে স্ক্রোল করে the পাঠ্য শেষ। পরিবর্তে পাঠ্যটি স্ক্রলগুলি ফিরে ক্যারেটটি দেখার বাইরে রেখে to

Comments

বিষয়বস্তুগুলি আটকানোর আগে অনপ্যাসে ডাকা হয় after আপনার নিজের পোস্টপাস্ট ফাংশনটি তৈরি করতে, পেস্টের ফলাফলগুলি ধুয়ে নিতে আপনার কমপক্ষে 4 মিমি সময়সই বিলম্ব হওয়া দরকার।

— ড্রাগনলর্ড

Answer 16

শ্রেণি পোর্টলেট-ফর্ম-ইনপুট-ফিল্ড সহ সমস্ত ক্ষেত্র থেকে বিশেষ অক্ষর মুছে ফেলার স্ক্রিপ্ট:

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

Comments

আপনি কি দয়া করে প্রাসঙ্গিক স্যানিটাইজেশনের একটি বর্ণনা যুক্ত করতে পারেন এবং কেন এটি পোস্টারের সমস্যা সমাধানে সহায়তা করতে পারে? কেবল একটি কোড ব্লক সরবরাহ করা ওপিকে (বা ভবিষ্যতের সন্ধানকারীদের) কীভাবে সমস্যার সমাধান করবেন তা বুঝতে সহায়তা করে না - এটি কেবল অনুলিপি কোডটি অনুলিপি / আটকানোকে উত্সাহ দেয়।

— ট্রয় অ্যালফোর্ড

Answer 17

এখানে একটি সতর্কতা আছে। ফায়ারফক্সে, আপনি যদি প্রতিটি কীআপের ইনপুট পাঠ্যটিকে পুনরায় সেট করেন, যদি পাঠ্যটি ইনপুট প্রস্থের দ্বারা অনুমোদিত দর্শনীয় স্থানের চেয়ে দীর্ঘ হয়, তবে প্রতিটি কী-আপের মানটি পুনরায় সেট করা ব্রাউজারের কার্যকারিতাটি ভেঙে দেয় যা পাঠ্যকে ক্যারেটের স্থানে স্ক্রোল করে the পাঠ্য শেষ। পরিবর্তে পাঠ্যটি স্ক্রলগুলি ফিরে ক্যারেটটি দেখার বাইরে রেখে to

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