অক্ষম ইনপুটে ইভেন্ট

Question

স্পষ্টতই কোনও প্রতিবন্ধী <input>কোনও ইভেন্ট দ্বারা পরিচালিত হয় না

এই সমস্যাটি নিয়ে কাজ করার কোনও উপায় আছে কি?

<input type="text" disabled="disabled" name="test" value="test" />

$(':input').click(function () {
    $(this).removeAttr('disabled');
})

এটি সক্ষম করতে এখানে, আমাকে ইনপুটটিতে ক্লিক করতে হবে। তবে আমি যদি এটি সক্রিয় না করি তবে ইনপুটটি পোস্ট করা উচিত নয়।

Comments

এখানে একটি ভাল বিকল্প ব্লগ.পেনগৌওর্সস

আপনি অন-সাবমিট হ্যান্ডলারের ইনপুটগুলিতে সিএসএস-প্রটেন্ড-অক্ষম এবং লুপটি ব্যবহার করতে পারেন, অ-অ্যাক্টিভেটেডগুলিকে বাস্তবের জন্য অক্ষম করে।

— ptrk

Answer 1

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

আমি এর চেয়ে ভাল সমাধানের কথা ভাবতে পারি না তবে সম্পূর্ণ ক্রস ব্রাউজারের সামঞ্জস্যের জন্য আপনি অক্ষম ইনপুটটির সামনে একটি উপাদান রাখতে পারেন এবং সেই উপাদানটির ক্লিকটি ধরতে পারেন। আমি কী বোঝাতে চাইছি তার উদাহরণ এখানে:

<div style="display:inline-block; position:relative;">
  <input type="text" disabled />
  <div style="position:absolute; left:0; right:0; top:0; bottom:0;"></div>
</div>​

jq:

$("div > div").click(function (evt) {
    $(this).hide().prev("input[disabled]").prop("disabled", false).focus();
});​

উদাহরণ: http://jsfiddle.net/RXqAm/170/ ( propপরিবর্তে jQuery 1.7 ব্যবহার করার জন্য আপডেট করা হয়েছে attr)।

Comments

ছোট জিনিস: আপনি যদি disabledকোনও মান সহ বৈশিষ্ট্যটি ব্যবহার করেন তবে এটি XHTML এর পরিবর্তে এইচটিএমএলকে বোঝায়, সেক্ষেত্রে বন্ধ হওয়া স্ল্যাশ অপ্রয়োজনীয়।

— টিম ডাউন

@ টিম: প্রকৃতপক্ষে এটি অপ্রয়োজনীয়, তবে এটি এখনও বৈধ এইচটিএমএল। এটি সত্যিই কেবল অভ্যাসের একটি শক্তি এবং আমার মনে হয় এটি আরও ভাল দেখাচ্ছে।

— অ্যান্ডি ই

থেক্স এক্স অ্যান্ডি, এটি বেশ স্মার্ট। সহজ কি নেই? আপনি কি জানেন যে কেন ডিজেবল ইনপুটগুলি হ্যান্ডেলযোগ্য নয়?

— পিয়েরে লেস্পিনে

এটির কোনও অর্থ নেই: অন্য কোনও এইচটিএমএল উপাদান মাউসের ইভেন্টগুলি পরিচালনা করে, কেন কোনও অক্ষম উপাদান নয় (যেমন mouseenter, ইত্যাদি)

— আগস্টিন রিডিংগার

আপনি আপনার সিএসএসে রেখে আপনার ক্লিকগুলি "ফেলে দেওয়া" থেকে অক্ষম উপাদানটিকে থামিয়ে দিতে পারেন input[disabled] {pointer-events:none}। তারপরে ক্লিকটি এমন আচরণ করে যেমন আপনি পিতামাতার উপাদানকে ক্লিক করেছেন। এই প্রোগ্রামটিতে এই সহজ, পরিষ্কার সমাধান, কিন্তু এটা দুর্ভাগ্যবশত শুধুমাত্র ব্রাউজারে সমর্থন জন্য কাজ করে pointer-events: সিএসএস সম্পত্তি caniuse.com/#search=pointer-events

— Doin থেকে

Answer 2

হতে পারে আপনি ক্ষেত্রটি কেবল পঠনযোগ্যভাবে করতে পারেন এবং জমা দেওয়ার সময় সমস্ত পাঠ্য ক্ষেত্র অক্ষম করে দিতে পারেন

$(".myform").submit(function(e) {
    $("input[readonly]", this).attr("disabled", true);
});

এবং ইনপুট (+ স্ক্রিপ্ট) হওয়া উচিত

<input type="text" readonly="readonly" name="test" value="test" />

$('input[readonly]').click(function () {
    $(this).removeAttr('readonly');
})

Comments

+1, এটি একটি শালীন বিকল্প পরামর্শ। কেবলমাত্র খারাপ দিকটিই হ'ল ইনপুট বাক্সটি অক্ষম স্টাইলিং গ্রহণ করবে না, যা ব্রাউজারগুলির মধ্যে পরিবর্তিত হয় তাই এটি কোনও অক্ষম ইনপুটটির ব্যবহারকারীর প্রত্যাশার সাথে সামঞ্জস্য বোধ করা শক্ত হবে।

— অ্যান্ডি ই

সত্য। সম্ভবত এটি CSS এর সাথে কাজ করা যেতে পারে? তবে হ্যাঁ এটির মতো সাধারণ অক্ষম ইনপুট ক্ষেত্রগুলির মতো চেহারা হবে না

— টোকিমন

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

— জোশুয়া

Answer 3

অক্ষম উপাদানগুলি কিছু ব্রাউজারগুলিতে ক্লিক "খাওয়া" করে - তারা সেগুলিতে কোনও প্রতিক্রিয়া জানায় না বা ইভেন্ট হ্যান্ডলারদের দ্বারা উপাদান বা এর কোনও ধারককে যে কোনও জায়গায় ক্যাপচার করার অনুমতি দেয় না।

এটি "ফিক্স" করার সবচেয়ে সহজ এবং পরিষ্কার উপায় আইএমএইচও (যদি আপনি ওপি-র মতো অক্ষম উপাদানগুলিতে ক্লিকগুলি ক্যাপচার করতে চান তবে) কেবল আপনার পৃষ্ঠায় নিম্নলিখিত সিএসএস যুক্ত করার জন্য:

input[disabled] {pointer-events:none}

এটি অক্ষম ইনপুটটিতে যে কোনও ক্লিকে পিতামণ্ডলের উপাদানগুলির মধ্যে পড়বে, যেখানে আপনি এগুলিকে সাধারণত ক্যাপচার করতে পারেন। (যদি আপনার বেশ কয়েকটি অক্ষম ইনপুট থাকে, তবে আপনি প্রতিটিটিকে তার নিজস্ব একটি পৃথক ধারক মধ্যে রাখতে চান, যদি সেগুলি ইতিমধ্যে ঠিকভাবে তৈরি না করা হয় - একটি অতিরিক্ত <span>বা একটি <div>, বলুন - সহজেই কোন অক্ষম ইনপুটটিকে আলাদা করা সহজ করতে পারে) ক্লিক করা হয়েছিল)।

---

খারাপ দিকটি হ'ল দুর্ভাগ্যক্রমে এই কৌশলটি পুরানো ব্রাউজারগুলির জন্য কাজ করবে না যা pointer-eventsসিএসএস সম্পত্তি সমর্থন করে না । (এটি আইই 11, এফএফ v3.6, ক্রোম ভি 4 থেকে কাজ করা উচিত): caniuse.com/#search=pointer-events

আপনার যদি পুরানো ব্রাউজারগুলি সমর্থন করার প্রয়োজন হয় তবে আপনাকে অন্য উত্তরগুলির একটি ব্যবহার করতে হবে!

Comments

আমি নিশ্চিত ছিলাম না যে input[disabled]জাভাস্ক্রিপ্ট ( element.disabled = true;) দ্বারা অক্ষম হওয়া উপাদানগুলির সাথেও মেলে কিনা তবে এটি মনে হয় এটি হয়। যাইহোক, আমি input:disabledক্লিনার খুঁজে ।

— মার্টিন

এটি একটি ভাল সমাধান বলে মনে হচ্ছে, আইই 11 এ আমার জন্য কাজ করে না! এছাড়াও আপনি এফএফ 38+ এবং ক্রোম 31+ বলেছেন তবে আপনার ক্যানিয়াস লিঙ্কটি এফএফ 3.6+ এবং ক্রোম 4+ বলে?

— user764754

@ ইউজার 64647575 mistake৪ ... আমার ভুল, আমি বুঝতে পারিনি যে আমার ব্রাউজারের পূর্ববর্তী সংস্করণগুলি পেতে ক্যানিজ পৃষ্ঠায় "সমস্ত দেখান" ক্লিক করতে হবে! এটা স্থির করেছেন। আইই ১১-র ক্ষেত্রে, আমি এটি কেবল পরীক্ষা করেছি এবং এটি ঠিকঠাক কাজ করে ( কোডটির জন্য jsfiddle.net/7kkszq1c/1 দেখুন , যদিও কোনও কারণে jsFiddle সাইট আইই 11 তে আমার জন্য কাজ করে নি, আমাকে এটিতে একটি আটকানো হয়েছিল)। পেজটি ওপেন পরিবর্তে)

— Doin থেকে

আপডেটের জন্য ধন্যবাদ! এর মধ্যে আমি এটিও পর্যবেক্ষণ করেছি যে এটি আইইডির একটি ওয়েবসাইটে কাজ করে তবে জেএসফিডেলের সাথে নয়। সম্ভবত jsfiddle iframe এর কারণে ...

— user764754

: @Protectorone: প্রতিবন্ধী একটি ছদ্ম-বর্গ থেকে সিএসএস 3 w3.org/TR/css3-selectors/#UIstates

— মার্টিন

Answer 4

আমি একটি বিকল্প পরামর্শ দেব - সিএসএস ব্যবহার করুন:

input.disabled {
    user-select : none;
    -moz-user-select : none;
    -webkit-user-select : none;
    color: gray;
    cursor: pointer;
}

অক্ষম বৈশিষ্ট্যের পরিবর্তে। তারপরে, আপনি অক্ষম ইনপুট অনুকরণ করতে আপনার নিজের সিএসএস বৈশিষ্ট্যগুলি যুক্ত করতে পারেন তবে আরও নিয়ন্ত্রণের সাথে।

Comments

শুধুমাত্র ie10 নিয়ে কাজ করে, অনেক বেশি ব্যবহারকারীর কাছে ie9 / 8. রয়েছে তাই নির্ভরযোগ্য বিকল্প নয়।

— এনকোড

এটি এখনও ফর্মটি জমা দেওয়ার সময় ক্ষেত্রটি পোস্ট করার কারণ হয়ে থাকে যা অনেক ক্ষেত্রেই অনাকাঙ্ক্ষিত।

— cimmanon

Answer 5

$(function() {

  $("input:disabled").closest("div").click(function() {
    $(this).find("input:disabled").attr("disabled", false).focus();
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<div>
  <input type="text" disabled />
</div>

Comments

তবে এটি ফায়ারফক্সে কাজ করে না - এবং এটি ছিল পুরো বিষয়টি!

— গ্যারেথউইন

Answer 6

পরিবর্তে disabled, আপনি ব্যবহার বিবেচনা করতে পারেন readonly। কিছু অতিরিক্ত সিএসএসের সাহায্যে আপনি ইনপুটটি স্টাইল করতে পারেন যাতে এটি disabledক্ষেত্রের মতো লাগে ।

আসলে আরও একটি সমস্যা আছে। ইভেন্টটি changeতখনই ট্রিগার করে যখন উপাদান ফোকাস হারাবে, যা disabledক্ষেত্র বিবেচনা করে যুক্তিযুক্ত নয় । সম্ভবত আপনি এই কলটিতে অন্য কল থেকে ডেটা চাপছেন। এই কাজটি করতে আপনি ইভেন্টটি 'বাইন্ড' ব্যবহার করতে পারেন।

$('form').bind('change', 'input', function () {
    console.log('Do your thing.');
});

Comments

আমার ভুল না হলে ফর্মের সাথে কেবল একটি পঠনযোগ্য ইনপুট জমা দেওয়া হবে

— পিয়েরে লেস্পিনে

এটাই সঠিক. এরপরে এটি @npth anwsner এর সাথে একত্রিত হওয়া উচিত।

— Nykac

ধন্যবাদ, এটি আমার মামলার জন্য স্মার্ট ক্লিন এবং আশাবাদী ছিল।

— সুলতানস

Answer 7

বা jQuery এবং CSS দিয়ে এটি করুন!

$('input.disabled').attr('ignore','true').css({
    'pointer-events':'none',
     'color': 'gray'
});

এইভাবে আপনি উপাদানটিকে অক্ষম দেখায় এবং কোনও পয়েন্টার ইভেন্টগুলিতে আগুন লাগবে না, তবু এটি প্রচারের অনুমতি দেয় এবং যদি জমা দেওয়া হয় তবে এটিকে উপেক্ষা করার জন্য 'উপেক্ষা' বৈশিষ্ট্যটি ব্যবহার করতে পারেন।

Comments

@ প্রডাস্টিক, এটি সত্য, তবে এটি এই মুহুর্তে প্রায় সমস্ত ব্রাউজারের জন্য কাজ করে এবং আপনি <11 এর জন্য একটি পলিফিল ব্যবহার করতে পারেন । সিডোনাল্ডসন, স্টাইলগুলি প্রয়োগ করতে স্ট্রেট সিএসএস ব্যবহার করবেন না কেন?

— কাইলমিট

@ কাইলমিট আপনি শৈলীগুলি সেট করার চেয়ে ক্লাস যুক্ত করতে পারবেন, তবে এই থ্রেডটি কী তা নয়! আমি কেবল পয়েন্টার ইভেন্টগুলিই পরামর্শ দিচ্ছিলাম যা আপনি এখনও ব্রাউজার ম্যাট্রিক্সের উপর নির্ভর করে একটি ভাল এবং সঠিক উত্তর। এবং যারা এই উত্তরটি চিহ্নিত করেছেন এমন প্রত্যেকের জন্য ধন্যবাদ যে এখান থেকে কিছু ভুল হয়নি বলে

— সাফ করে

@ সিডোনাল্ডসন, এটি একটি ভাল উত্তর তাই আমিও চাই যে এটিকেও উচ্চতর স্থান দেওয়া হোক। আমি নিশ্চিত না যে উপেক্ষা বৈশিষ্ট্য কী করে । তবে সিএসএস সম্পর্কে আমার বক্তব্যটি আমি মনে করি না যে সিএসএস প্রয়োগের জন্য আমাদের জিকুয়েরি দরকার need আপনি কেবলমাত্র একটি সিএসএস নিয়ম সেটআপ করতে পারেন যা একই নির্বাচককে লক্ষ্যযুক্ত করেছিল এবং পয়েন্টার ইভেন্টগুলিকে অক্ষম করেছে। এই কৌতূহলে , jQuery এবং CSS একই জিনিস করা উচিত, তবে CSS আরও বেশি পারফরম্যান্ট হবে।

— কাইলমিট

@ কাইলিমিট আহ, ভালভাবে ধরে নিচ্ছেন যে ফর্মটি জমা দেওয়া হয়েছে আপনাকে কোনওভাবেই ব্যাকএন্ডকে সেই ক্ষেত্রটি উপেক্ষা করতে হবে যদি এটির কোনও মান থাকে (যেহেতু আমরা অক্ষম হয়েছি)।

— সিডোনাল্ডসন

আমি সম্মতি দিচ্ছি যে সিএসএস আরও শক্তিশালী হতে পারে কারণ আপনি কোনও বৈশিষ্ট্যের উপর ভিত্তি করে কোনও নির্বাচক ব্যবহার করতে পারেন! এই ডেমোটি পরীক্ষা করে দেখুন যেখানে আমি ক্রোমের নিজস্ব অক্ষম ক্ষেত্রের সাথে মেলে: jsfiddle.net/KyleMit/pxx8pk6v

— সিডোনাল্ডসন

Answer 8

আমাদের আজকের মতো সমস্যা ছিল তবে আমরা এইচটিএমএল পরিবর্তন করতে চাইনি। সুতরাং আমরা এটি অর্জনের জন্য মাউসেন্টার ইভেন্টটি ব্যবহার করেছি

var doThingsOnClick = function() {
    // your click function here
};

$(document).on({
    'mouseenter': function () {
        $(this).removeAttr('disabled').bind('click', doThingsOnClick);
    },
    'mouseleave': function () {
        $(this).unbind('click', doThingsOnClick).attr('disabled', 'disabled');
    },
}, 'input.disabled');

Answer 9

আমি আর একটি সমাধান খুঁজে পাচ্ছি:

<input type="text" class="disabled" name="test" value="test" />

ক্লাস "অক্ষম" অস্বচ্ছ উপাদানটিকে অস্বচ্ছভাবে নকল করুন:

<style type="text/css">
    input.disabled {
        opacity: 0.5;
    }
</style>

এবং তারপরে ইভেন্টটি অক্ষম করা থাকলে এবং ক্লাসটি সরিয়ে ফেললে ইভেন্টটি বাতিল করুন:

$(document).on('click','input.disabled',function(event) {
    event.preventDefault();
    $(this).removeClass('disabled');
});

Comments

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

— রায়মুন্ড ক্রিমার

Answer 10

পরামর্শ এখানে এই প্রশ্নের জন্য একটি ভাল প্রার্থীর মত দেখাচ্ছে

প্রতিবন্ধী উপাদানটিতে ক্লিক ইভেন্ট সম্পাদন করছেন? জাভাস্ক্রিপ্ট jQuery

jQuery('input#submit').click(function(e) {
    if ( something ) {        
        return false;
    } 
});

Comments

ক্লিক ইভেন্ট সম্ভবত অক্ষম বৈশিষ্ট্যের সাথে ঘটবে না।

— হ্যালো ইউনিভার্স