আমি কীভাবে সিএসএস ব্যবহার করে ফর্ম ক্ষেত্রগুলি অক্ষম করব?

Question

সিএসএস ব্যবহার করে ফর্ম ক্ষেত্রগুলি অক্ষম করা কি সম্ভব? আমি অবশ্যই বৈশিষ্ট্যটি অক্ষম সম্পর্কে জানি, তবে এটি কি কোনও সিএসএস নিয়মে উল্লেখ করা সম্ভব? কিছুটা এইরকম -

<input type="text" name="username" value="admin" >
<style type="text/css">
  input[name=username] {
    disabled: true; /* Does not work */
  }
</style>

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

এটি অত্যন্ত কৌতূহলযুক্ত যে আপনার সিএসএসে দৃশ্যমান এবং প্রদর্শনের বৈশিষ্ট্য রয়েছে তবে সক্ষম / অক্ষম নয়। স্থির-অধীন-কাজ করা এইচটিএমএল 5 স্ট্যান্ডার্ডে বা এমনকী কিছু নয় যা মানক (ব্রাউজার নির্দিষ্ট) রয়েছে?

Comments

এটি নীচে বেশ কয়েকবার উল্লেখ করা হয়েছে তবে শব্দদ্বারে এটি হারিয়ে গেছে। পয়েন্টার-ইভেন্টগুলি চেষ্টা করুন: কিছুই নয়;

— কোরি অ্যালিক্স

Answer 1

এটি সহায়ক হতে পারে:

<input type="text" name="username" value="admin" >

<style type="text/css">
input[name=username] {
    pointer-events: none;
 }
</style>

হালনাগাদ:

এবং যদি ট্যাব সূচক থেকে অক্ষম করতে চান আপনি এটি এইভাবে ব্যবহার করতে পারেন:

 <input type="text" name="username" value="admin" tabindex="-1" >

 <style type="text/css">
  input[name=username] {
    pointer-events: none;
   }
 </style>

Comments

এটি আমার সমস্ত ইনপুট ক্ষেত্রগুলি অক্ষম করার জন্য ঠিক যা ছিল তার মতো দেখতে লাগছিল তবে এটি মাউস ইভেন্টগুলি থেকে বাধা দিলেও কিবোর্ড ট্যাব ব্যবহার করে সেগুলি অ্যাক্সেস এবং পরিবর্তন করা যেতে পারে

— কেন

ট্যাব-সূচক সিএসএস সম্পত্তি বিদ্যমান নেই। এটির এইচটিএমএল বৈশিষ্ট্য হওয়া দরকার (ট্যাবিনডেক্স = -1)

— N4ppeL

ট্যাব-সূচী ক্রোমে খুঁজে পাওয়া যায় না এবং কাজ করে না, টিএবি কী টিপে মারা বৈশিষ্ট্যটি অক্ষম করে দিয়েছে যাতে এটি সম্পূর্ণ সমাধান নয়।

— কিউমাস্টার

Answer 2

আপনি CSS ব্যবহার করে অক্ষম প্রভাব জাল করতে পারেন।

pointer-events:none;

আপনি রঙ ইত্যাদি পরিবর্তন করতে পারেন might

Comments

এটি সহায়তা করে তবে ক্ষেত্রগুলিতে ট্যাবিং প্রতিরোধ করে না।

— জারউড

আমি একটি ব্রেডক্রাম্বের শেষ লিঙ্কটি "অক্ষম" করতে চেয়েছিলাম, এবং আমি এই কৌতূহলের কথা মাথায় রেখেছিলাম না ... কিছু রঙ পরিবর্তন করে এবং আন্ডারলাইন ছাড়াই এটি ধন্যবাদ! : ডি

— ফ্যাসুন্দো কলম্বিয়ার

এটি ফর্মের মানগুলি জমা দেওয়া থেকে বাধা দেয় না।

— কেন ওয়েইন ভিন্ডারলিন্ডে

নিবন্ধসমূহ

— theonlygusti

@ থিওনলিগুস্টি অক্ষম <ফর্মের ইনপুট> উপাদান জমা দেওয়া হবে না।

— ডগড_ইন_সিএন

Answer 3

যেহেতু নিয়মগুলি জাভাস্ক্রিপ্টে চলছে, তাই কেন জাভাস্ক্রিপ্ট ব্যবহার করে তাদের অক্ষম করবেন না (বা আমার উদাহরণগুলির ক্ষেত্রে, jQuery)?

$('#fieldId').attr('disabled', 'disabled'); //Disable
$('#fieldId').removeAttr('disabled'); //Enable

হালনাগাদ

attrফাংশন আর এই প্রাথমিক পদ্ধতির, যেমন নীচের মন্তব্য নির্দিষ্ট করা হয়। এটি এখন propফাংশন দিয়ে সম্পন্ন হয় ।

$( "input" ).prop( "disabled", true ); //Disable
$( "input" ).prop( "disabled", false ); //Enable

Comments

এটি $ ('# ফাইলডআইডি') হওয়া উচিত নয়। অপসারণ ('অক্ষম'); // সক্ষম করুন

— অনুপম জৈন

সম্ভবত এটি লক্ষনীয় যে ব্যবহারকারী যদি জাভাস্ক্রিপ্ট অক্ষম করে থাকে তবে এই সমাধানটি কাজ করবে না।

— জোশ-ফুগল

ফায়ারফক্স ২০.০ (অন্যান্য সংস্করণ সম্পর্কে নিশ্চিত নয়, এটি আমি বিকাশের জন্য ব্যবহার করছি) বৈশিষ্ট্যটি অপসারণ করা দরকার। @ ডাচলি 432 তত্ত্বের ক্ষেত্রে সঠিক, .removeAttr ('অক্ষম') ব্যবহার করে; সঠিক ব্যবহারিক সমাধান (কমপক্ষে আমার বর্তমান ব্রাউজারে)।

আপনি JQuery ব্যবহার করতে না পারলে।

— সামুদ্রিক

এফওয়াইআই - jQuery ডকুমেন্টেশন এই ক্ষেত্রে এর .prop()পরিবর্তে ব্যবহার করার পরামর্শ দেয় .attr()। "JQuery 1.6 হিসাবে, .attr () পদ্ধতিটি নির্ধারিত বৈশিষ্ট্যগুলির জন্য অপরিবর্তিত ফেরত দেয় form ফর্ম উপাদানগুলির চেক, নির্বাচিত, বা অক্ষম রাষ্ট্রের মতো DOM বৈশিষ্ট্য পুনরুদ্ধার এবং পরিবর্তন করতে .prop () পদ্ধতিটি ব্যবহার করুন। " উত্স ডকুমেন্টেশন: .attr () এবং .prop ()

— নিকোলাস রায়ান

Answer 4

এটি অত্যন্ত কৌতূহলযুক্ত যে আপনার সিএসএসে দৃশ্যমান এবং প্রদর্শনের বৈশিষ্ট্য রয়েছে তবে সক্ষম / অক্ষম নয়।

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

আপনার ক্ষেত্রগুলিকে প্রকৃতপক্ষে অক্ষম করতে, আপনাকে অবশ্যইdisabled HTML এ বৈশিষ্ট্য বা disabledজাভাস্ক্রিপ্টে DOM বৈশিষ্ট্যটি ব্যবহার করতে হবে ।

Comments

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

— অনুপম জৈন

অক্ষম একটি রাষ্ট্র নয়, আচরণ নয়। তিনি যা চাইছেন তা পুরোপুরি যুক্তিসঙ্গত। উদাহরণস্বরূপ, আপনি ডেটা প্রক্রিয়া করার সময় একাধিক ক্ষেত্রে একটি ব্যস্ত শ্রেণি যুক্ত করতে চাইতে পারেন want তদ্ব্যতীত, ডাব্লু 3 সি সম্মতিযুক্ত বলে মনে হচ্ছে যেহেতু এটি সিএসএসকে অক্ষম সিউডো শ্রেণির মাধ্যমে উপাদান নির্বাচনের অনুমতি দেয়।

— আইএএমএনএন

@ আইএমএনএএন: ১) "অক্ষম একটি রাষ্ট্র নয়, আচরণ নয়" " এটি ঠিক প্রতিটি অন্যান্য এইচটিএমএল / ডিওএম বৈশিষ্ট্য সম্পর্কে। ২) "উদাহরণস্বরূপ, ডেটা প্রক্রিয়া চলাকালীন আপনি একাধিক ক্ষেত্রে একটি ব্যস্ত শ্রেণি যুক্ত করতে চাইতে পারেন" " আপনি এটি একটি স্ক্রিপ্টে করেন। 3) "তদ্ব্যতীত, ডাব্লু 3 সি সম্মত বলে মনে হচ্ছে যেহেতু এটি সিএসএসকে অক্ষম ছদ্ম শ্রেণীর মাধ্যমে উপাদানগুলির নির্বাচনের অনুমতি দেয়" " কোনও উপাদান সক্ষম বা অক্ষম করা হয়েছে তার উপর ভিত্তি করে কোনও উপাদান নির্বাচন করতে সক্ষম হওয়ায় CSS ব্যবহার করে সেই রাজ্য পরিবর্তন করতে সক্ষম হওয়ার কোনও সম্পর্ক নেই ।

— BoltClock

সিএসএসে এমন অনেকগুলি বিষয় রয়েছে যা বাস্তবে আচরণের পরিবর্তন হিসাবে বিবেচিত হতে পারে যেমন পয়েন্টার-ইভেন্টগুলি: কিছুই নয়; @ আনাইমি উল্লেখ করেছেন তাই অক্ষমকে সহজেই প্রদর্শন সম্পত্তি হিসাবে বিবেচনা করা যেতে পারে। খুব খারাপ এটি নয়, কয়েকটি জিনিস সহজ করে তুলবে।

— মিকেল লেপিস্টö

@ মিকেল লেপিস্ট: হ্যাঁ, আমি pointer-eventsসিএসএস সম্পত্তি হিসাবেও একমত নই । এফওয়াইআই, pointer-events এসভিজি থেকে উদ্ভূত ।

— BoltClock

Answer 5

আপনি টেক্সটবক্স অক্ষম করতে CSS ব্যবহার করতে পারবেন না। সমাধান HTML বৈশিষ্ট্য হবে।

disabled="disabled"

Comments

যদিও এটি নীতিগতভাবে কাজ করে, আপনি যদি পুরো প্রশ্নটি পড়ে থাকেন তবে এটিতে ফর্ম ক্ষেত্রটি স্বয়ংক্রিয়ভাবে উত্পন্ন হচ্ছে এবং এরপরে অক্ষম করা দরকার to

— থেলেম

@mr_eclair। এটি ---> পয়েন্টার-ইভেন্টগুলি ব্যবহার করে সম্ভব: কিছুই নয়; CSS সম্পত্তি।

— ফ্রেইডুন বারিকজেহী

দ্রষ্টব্য: disabledবৈশিষ্ট্যযুক্ত উপাদানগুলি জমা দেওয়া হয় না - তাদের মানগুলি সার্ভারে পোস্ট করা হয় না। পড়ুন: স্ট্যাকওভারফ্লো.com

— কাই নোক

Answer 6

ব্যবহারিক সমাধান হ'ল সিএসএস ব্যবহার করে ইনপুটটি লুকিয়ে রাখতে।

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

Comments

আপনি যদি জাভাস্ক্রিপ্ট ব্যবহার করে থাকেন তবে এটি কেবলমাত্র প্রয়োজন / অক্ষম করার পক্ষে অক্ষম হবে?

— মাইন্ডভক্স

প্রকৃতপক্ষে, তবে এই নির্দিষ্ট প্রশ্নের প্রসঙ্গে, এটি একটি কার্যকর উপায় হতে পারে।

— গ্রাফিকডিভাইন

Answer 7

প্রথমবার কোনও কিছুর উত্তর দেওয়া, এবং সম্ভবত কিছুটা দেরি করা ...

আমি জাভাস্ক্রিপ্ট দ্বারা এটি করতে সম্মত, যদি আপনি ইতিমধ্যে এটি ব্যবহার করে থাকেন।

একটি যৌগিক কাঠামোর জন্য, যেমন আমি সাধারণত ব্যবহার করি, ব্যবহারকারীর মিথস্ক্রিয়া থেকে উপাদানগুলিকে অবরুদ্ধ করার জন্য আমি উপাদানটির পরে একটি সিএসএস সিউডো তৈরি করেছি এবং পুরো কাঠামোটিতে কোনও পরিবর্তন না করে স্টাইলিংকে অনুমতি দিয়েছি।

উদাহরণ স্বরূপ:

<div id=test class=stdInput>
    <label class=stdInputLabel for=selecterthingy>A label for this input</label>
    <label class=selectWrapper>
         <select id=selecterthingy>
             <option selected disabled>Placeholder</option>
             <option value=1>Option 1</option>
             <option value=2>Option 2</option>
         </select>
    </label>
</div>

আমি disabledমোড়কে একটি ক্লাস রাখতে পারিdiv

.disabled { 
    position : relative; 
    color    : grey;
}
.disabled:after {
    position :absolute;
    left     : 0;
    top      : 0;
    width    : 100%;
    height   : 100%;
    content  :' ';
}

divএটি ধীরে ধীরে ধীরে ধীরে পাঠ্যটি ব্যবহার করে এটি ব্যবহারকারীর জন্য ব্যবহারযোগ্য unus

আমার উদাহরণ জেএসফিডাল

Comments

বিটিডাব্লু: আপনাকে এখনও ট্যাবিং পরিচালনা করতে হবে যা ব্যবহারকারীকে ক্ষেত্রের কাছে যেতে এবং এটি পরিবর্তন করতে দেয়।

— কে কিম্বলে

সুতরাং <সিলেক্ট> এর একটি শ্রেণি = "অক্ষম" হওয়া উচিত নয়?

— টিমোসোলো

এটি উজ্জ্বল আমি জানতাম এরকম কিছু আছে। :) ধন্যবাদ

— জেমস হ্যারিংটন

এটি সত্যিই দরকারী। আমি জানি জাভাস্ক্রিপ্টটি অক্ষম রাখতে সেট করা আরও ভাল but

— জার্কার্ক

Answer 8

আমি সর্বদা ব্যবহার করছি:

input.disabled {
    pointer-events:none;
    color:#AAA;
    background:#F5F5F5;
}

এবং তারপরে ইনপুট ক্ষেত্রে CSS ক্লাস প্রয়োগ করা:

<input class="disabled" type="text" value="90" name="myinput" id="myinput" />

Answer 9

ইনপুট [নাম = ব্যবহারকারীর নাম] {অক্ষম: সত্য; /* কাজ করে না */ }

আমি জানি এই প্রশ্নটি বেশ পুরানো তবে অন্যান্য ব্যবহারকারী যারা এই সমস্যাটি নিয়ে আসেন তাদের পক্ষে, আমি মনে করি ইনপুট অক্ষম করার সহজতম উপায়টি কেবল ': অক্ষম' দ্বারা

<input type="text" name="username" value="admin" disabled />
<style type="text/css">
  input[name=username]:disabled {
    opacity: 0.5 !important; /* Fade effect */
    cursor: not-allowed; /* Cursor change to disabled state*/
  }
</style>

বাস্তবে, আপনার কাছে জাভাস্ক্রিপ্ট বা jquery দিয়ে গতিশীল / স্বয়ংক্রিয়ভাবে ইনপুট অক্ষম করার জন্য কিছু স্ক্রিপ্ট রয়েছে যা আপনার যুক্ত শর্তের ভিত্তিতে স্বয়ংক্রিয়ভাবে অক্ষম হবে।

উদাহরণস্বরূপ jQuery এ:

if (condition) {
// Make this input prop disabled state
  $('input').prop('disabled', true);
}
else {
// Do something else
}

আশা করি CSS এর উত্তরটি সহায়তা করবে helps

Answer 10

আমি যে ভয় পাচ্ছি তা আপনি করতে পারবেন না তবে আপনি যদি ক্ষেত্রগুলিতে বৈশিষ্ট্যগুলি যুক্ত করতে না চান তবে jQuery এ নিম্নলিখিতগুলি করতে পারেন। এটি কেবল আপনার <head></head>ট্যাগের মধ্যে রাখুন

$(document).ready(function(){ 
  $(".inputClass").focus(function(){
    $(this).blur();
  }); 
});

আপনি যদি ডিওএম (জেএস সহ) ক্ষেত্রগুলি জেনারেট করে থাকেন তবে পরিবর্তে আপনার এটি করা উচিত:

$(document).ready(function(){ 
  $(document).on("focus", ".inputClass", function(){
    $(this).blur();
  }); 
});

Answer 11

আপনার ইনপুট উপাদানটির উপরে একটি ওভারলে রেখে এটি অ-সমালোচনামূলক উদ্দেশ্যে করা যেতে পারে। খাঁটি এইচটিএমএল এবং সিএসএসে আমার উদাহরণ এখানে।

https://jsfiddle.net/1tL40L99/

    <div id="container">
        <input name="name" type="text" value="Text input here" />
        <span id="overlay"></span>
    </div>

    <style>
        #container {
            width: 300px;
            height: 50px;
            position: relative;
        }
        #container input[type="text"] {
            position: relative;
            top: 15px;
            z-index: 1;
            width: 200px;
            display: block;
            margin: 0 auto;
        }
        #container #overlay {
            width: 300px;
            height: 50px;
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 2;
            background: rgba(255,0,0, .5);
        }
    </style>

Answer 12

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

function change_input() {
	$('#id_input1')
		.toggleClass('class_disabled')
		.toggleClass('class_enabled');
		
	$('.class_disabled').attr('disabled', '');
	$('.class_enabled').removeAttr('disabled', '');
}

.class_disabled { background-color : #FF0000; }
.class_enabled { background-color : #00FF00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form> 	
	Input: <input id="id_input1" class="class_enabled" />		
	<input type="button" value="Toggle" onclick="change_input()";/>	
</form>

Answer 13

সমাধানের একটি pointer-events: none;প্রবর্তন, যা ইনপুটটিকে এখনও তার লেবেলযুক্ত নিয়ন্ত্রণ বা ট্যাবিনডেক্সের মাধ্যমে অ্যাক্সেসযোগ্য হতে পারে তা সমাধান করে, একটি ডিভের মধ্যে ইনপুটটি মোড়ানো হয়, যা অক্ষম পাঠ্য ইনপুট হিসাবে স্টাইল করা হয় এবং input { visibility: hidden; }ইনপুট "অক্ষম" থাকাকালীন সেট করা হয় ।
রেফ: https://developer.mozilla.org/en-US/docs/Web/CSS/ ভিজিবিলিটি # মূল্য

div.dependant {
  border: 0.1px solid rgb(170, 170, 170);
  background-color: rgb(235,235,228);
  box-sizing: border-box;
}
input[type="checkbox"]:not(:checked) ~ div.dependant:first-of-type {
  display: inline-block;
}
input[type="checkbox"]:checked ~ div.dependant:first-of-type {
  display: contents;
}
input[type="checkbox"]:not(:checked) ~ div.dependant:first-of-type > input {
  visibility: hidden;
}

<form>
  <label for="chk1">Enable textbox?</label>
  <input id="chk1" type="checkbox" />
  <br />
  <label for="text1">Input textbox label</label>
  <div class="dependant">
    <input id="text1" type="text" />
  </div>
</form>

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

এটি কোনও অতিরিক্ত মান visibility: disabledবা display: disabledসম্ভবত এটি এমনকি প্রাসঙ্গিক উপাদানগুলির আচরণ সম্পর্কিতappearance: disabled যে কোনও সম্পর্কিত নিয়ন্ত্রণ উপাদানকে visibility: hiddenপ্রভাবিত করে তা প্রবর্তন করা আরও অনেক বুদ্ধিমান বলে মনে হয় ।