কীভাবে ইনপুট টাইপ = পাঠ্য অক্ষম করবেন?

123

আমি textযদি সম্ভব হয় তবে জাভাস্ক্রিপ্ট ব্যবহার করে টাইপের একটি ইনপুট ক্ষেত্রে লেখা অক্ষম করতে চাই । ইনপুট ক্ষেত্রটি একটি ডাটাবেস থেকে পপুলেটেড হয়; এজন্য আমি চাই না যে ব্যবহারকারী তার মানটি পরিবর্তন করুন।

javascript html

— kawtousse
সূত্র

172

পৃষ্ঠাটি রেন্ডার করার সময় আপনি যদি এটি জানেন তবে এটি আপনার মতো মনে হচ্ছে কারণ ডাটাবেসের একটি মান রয়েছে তবে জাভাস্ক্রিপ্টের পরিবর্তে রেন্ডার করার সময় এটি অক্ষম করা ভাল। এটি করার জন্য, কেবলমাত্র এটির মতো readonlyবৈশিষ্ট্য (বা disabledআপনি যদি ফর্ম জমা থেকেও মুছে ফেলতে চান) যোগ করুন <input>:

<input type="text" disabled="disabled" />
//or...
<input type="text" readonly="readonly" />

— নিক ক্র্যাভার
সূত্র

81

আমি জানি না কেন এটি ভোট পায়, এটি প্রশ্নের উত্তর দেয় না। আমরা জাভাস্ক্রিপ্ট উত্তর প্রত্যাশা ছিল।

— সোফি

3

@ সোফি এটি জিজ্ঞাসকের পক্ষে তাদের অবস্থার উপর ভিত্তি করে এটি করার সবচেয়ে সঠিক উপায়, সম্ভবত কোনও শিরোনাম পরিবর্তন কার্যকর হয়।

— নিক ক্র্যাভার

6

অক্ষম মোড ইনপুট বাক্সে ক্লিক ইভেন্টগুলিকে প্রতিরোধ করে, পঠনযোগ্য নয়। FYI।

— নটোল

"অক্ষম" ক্ষেত্রের মতো দেখতে "পঠনযোগ্য" ইনপুট ক্ষেত্রটি পেতে 'স্টাইল = "রঙ: ধূসর; পটভূমি-রঙ: # F0F0F0;"' সেট করুন। (এটি এই উত্তরের মন্তব্য ছিল )

— জ্যাক টরন্টো

2

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

— অ্যারন ওয়াল্যান্টাইন

206

document.getElementById('foo').disabled = true;

অথবা

document.getElementById('foo').readOnly = true;

নোট করুন যে readOnlyফায়ারফক্সে (ম্যাজিক) সঠিকভাবে কাজ করতে উটকেসে থাকা উচিত।

ডেমো: https://jsfiddle.net/L96svw3c/ - disabledএবং এর মধ্যে পার্থক্যটি কিছুটা ব্যাখ্যা করে readOnly।

— hudolejev
সূত্র

3

এটি আমার পক্ষে কাজ করেছে। JQuery সংস্করণ হল $ ( 'ইনপুট') ঠেকনা ( 'প্রতিবন্ধী', সত্য)।

— ড্যানিয়েল সূর্যের ইয়াং

আমি এই বিষয়ে সাত বছর দেরী করছি - তবে 2017 সালে এই দুজনের মধ্যে কোনও অর্থগত পার্থক্য রয়েছে কি না?

— জুলে

2

আপনি একেবারেই দেরী করেন না, যাদুটি এখনও আছে (: আমি তখন কোন প্ল্যাটফর্মটি পরীক্ষা করেছিলাম তা মনে readonlyনেই) তবে আজ (লোয়ারকেস) উবুন্টুতে ফায়ারফক্স ৫২ তে এখনও কাজ করে না - এটি উটের ক্ষেত্রে হওয়া উচিত।

— হুডোলেজেভ

কেন এই কাজ আমার জন্য না? আমি এর সাথে একটি inputউপাদান তৈরি করেছি id="gate"এবং আমি আপনার কোডটি চেষ্টা করেছি যা দেখে মনে হয় না যে এটি আমার পক্ষে কাজ করছে ...

— ভলডেমর্টের

21

যদি ডেটাবেস থেকে ডেটা পপুলেটে থাকে তবে আপনি এটি প্রদর্শন করতে কোনও ট্যাগ ব্যবহার না করার বিষয়টি বিবেচনা করতে<input> পারেন। তবুও, আপনি এটিকে ঠিক ট্যাগটিতে অক্ষম করতে পারেন:

<input type='text' value='${magic.database.value}' disabled>

আপনার যদি পরে জাভাস্ক্রিপ্টের সাহায্যে এটি অক্ষম করতে হয়, আপনি "অক্ষম" বৈশিষ্ট্যটি সেট করতে পারেন:

document.getElementById('theInput').disabled = true;

কারণটিকে আমি মান হিসাবে না দেখানোর পরামর্শ দিচ্ছি তা <input>হ'ল আমার অভিজ্ঞতায় এটি লেআউট সংক্রান্ত সমস্যা সৃষ্টি করে। যদি পাঠ্য দীর্ঘ হয় <input>তবে ব্যবহারকারীর জন্য পাঠ্যটি চেষ্টা ও স্ক্রোল করতে হবে যা সাধারণ লোকেরা অনুমান করবে এমন কিছু নয়। আপনি যদি একে একে <span>বা অন্য কিছুতে ফেলে দেন তবে আপনার স্টাইলের নমনীয়তা বেশি রয়েছে।

— সূচালো
সূত্র

3

অক্ষম মনে রাখা কিছু ব্রাউজারে পাঠ্যকে প্রায় অপঠনযোগ্য করে তুলতে পারে। আপনি কেবলমাত্র অ্যাট্রিবিউট, যেমন <ইনপুট টাইপ = "পাঠ্য" মান = "foo বিন্যাস" কেবলমাত্র> সাথে উন্নত বন্ধ হতে পারে

— Olly হজসন

7

আপনি jquery দ্বারাও করতে পারেন:

$('#foo')[0].disabled = true;

কাজের উদাহরণ:

$('#foo')[0].disabled = true;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="foo" placeholder="placeholder" value="value" />

স্নিপেট প্রসারিত করুন

— চানি পোজ
সূত্র

1

@ চনি পোজ আপনি জেকারি অবজেক্টে নেটিভ জেএস সেটারকে কল করছেন এটির ফলে ত্রুটি হবে। $ ( '# foo বিন্যাস') [0] .disabled = সত্য বা $ ( '# foo বিন্যাস') পেতে (0) .disabled = সত্য কাজ করতে হবে।

— Arek Kostrzeba

6

আপনি চাইলে আপনার ইনপুট বাক্সের একটি রেফারেন্স পান (যেমন document.getElementById('mytextbox')) এবং এর readonlyসম্পত্তিটি এতে সেট করুন true:

myInputBox.readonly = true;

বিকল্পভাবে আপনি সহজেই এই সম্পত্তিটি ইনলাইন যুক্ত করতে পারেন (জাভাস্ক্রিপ্টের প্রয়োজন নেই):

<input type="text" value="from db" readonly="readonly" />

— রওতিন মার্থ
সূত্র

যদি তুমি লেখা এইচটিএমএল (যেমন এক্সএইচটিএমএল উল্টোদিকে) যে <ইনপুট টাইপ = "পাঠ্য" মান = "ডিবি থেকে" কেবলমাত্র> হতে চাই

— Olly হজসন