আমি কি এইচটিএমএল 5 নম্বর ইনপুটটির স্পিন বক্সটি আড়াল করতে পারি?

Question

নতুন স্পিন বাক্সগুলি গোপন করার ব্রাউজারগুলিতে কি কোনও ধারাবাহিক উপায় রয়েছে যা কিছু ব্রাউজারগুলি (যেমন ক্রোম) প্রকার সংখ্যার এইচটিএমএল ইনপুট দেয়? উপরের / নীচের তীরগুলি প্রদর্শিত না হতে পারে এমন জন্য আমি একটি সিএসএস বা জাভাস্ক্রিপ্ট পদ্ধতির সন্ধান করছি।

<input id="test" type="number">

Comments

আপনি যে কোডটি ব্যবহার করছেন তার উদাহরণ পোস্ট করতে পারেন? একটি স্ক্রিনশট পাশাপাশি দুর্দান্ত হবে তাই আমরা জানি আপনি কী দেখছেন। আমি <input type="number" min="4" max="8" />ক্রোমে তাকিয়ে আছি এবং পাশের উপরে এবং নীচে তীরগুলি সহ একটি সাধারণ ইনপুট ক্ষেত্রটি দেখছি।

— ক্যালভিনফ

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

— অ্যালান

যদি আপনি নম্বরটি ইনপুট ব্যবহার করেন, তাহলে ব্যবহার এমন কিছু বিষয় যা আধুনিক আইওএস, অ্যান্ড্রয়েড, এবং ডেস্কটপে ব্রাউজার সঙ্গে চমৎকার খেলে নিশ্চিত করা: <input type="number" pattern="[0-9]*" inputmode="numeric">। আরও তথ্য: stackoverflow.com/a/31619311/806956

— অ্যারন গ্রে

আমি যা করার পরামর্শ দিচ্ছি তা হল লাইন ধরে মার্কআপ লিখতে <input type="text" placeholder="number (digits only)" pattern="[0-9]+" class="validate number-validation" ... > এবং jQuery ভ্যালিডাটি বা বৈধতা হ্যান্ডেলের অনুরূপ ব্যবহার করা । আমি এই পদ্ধতির পরীক্ষা করিনি, এই কারণেই এটি একটি মন্তব্য নয়, বরং উত্তর।

— আগি হামারথিপ

Answer 1

এই সিএসএস কার্যকরভাবে ওয়েবকিট ব্রাউজারগুলির জন্য স্পিন বোতামটি আড়াল করে (এটি Chrome 7.0.517.44 এবং সাফারি সংস্করণ 5.0.2 (6533.18.5) এ পরীক্ষা করেছে):

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}

<input type="number" step="0.01" />

আপনি যে উপাদানগুলিতে আগ্রহী সেগুলির জন্য ম্যাচ সিএসএস বৈশিষ্ট্য সন্ধান করার জন্য সিউডো উপাদানগুলির জন্য আপনি সর্বদা পরিদর্শক (ওয়েবকিট, ফায়ারফক্সের জন্য সম্ভবত ফায়ারবগ) ব্যবহার করতে পারেন। এই চিত্রটি একটি ইনপুট উপাদান টাইপ = "সংখ্যা" এর ফলাফল দেখায়:

Comments

দেখে মনে হচ্ছে যে ক্রোমের আর কোনও সমস্যা নেই, তাই আপনি display: none;কেবলমাত্র নির্বাচকটির ভিতরে কেবল জিনিস হিসাবে ব্যবহার করতে পারেন

— ফিলিফ্রেও

এটি দুর্ভাগ্যক্রমে ক্রস ব্রাউজার নয় তাই আমি type=numberআপনাকে এই তীরগুলি লুকিয়ে রাখতে চাইলে ব্যবহারের বিরুদ্ধে পরামর্শ দেব । যেমন বর্তমানে তারা অপেরাতে প্রদর্শিত হবে এবং তারা যখন এই ইনপুট প্রকারটি প্রয়োগ করবে তখন তারা ফায়ারফক্স, আইই ইত্যাদিতে প্রদর্শিত হতে শুরু করবে being

— মিগল

বৈধ এইচটিএমএল নয় এমন বিকল্প বিকল্পগুলিতে আমাকে max=এবং min=বৈশিষ্ট্যগুলি ব্যবহার করতে হবে। লোকেরা এই স্পিনার সহ অপেরাও উল্লেখ করে। সাফারি / ক্রোমের মতো অপেরার জন্য কি কোনও সমাধান রয়েছে? <input>type="text"

— আনোড করুন

রেকর্ডের জন্য, ক্রোমের input::-webkit-clear-buttonএক্স বোতামটিও রয়েছে

— aldo.roman.nurena

2019 হিসাবে, এটি ফায়ারফক্সে আমার পক্ষে কার্যকর হয়নি। এই সমাধান আমার জন্য কাজ stackoverflow.com/questions/45396280/...

— lwitzel

Answer 2

ফায়ারফক্স ২৯ বর্তমানে সংখ্যা উপাদানগুলির জন্য সমর্থন যোগ করে, তাই ওয়েবকিট এবং মোজ ভিত্তিক ব্রাউজারগুলিতে স্পিনারদের আড়াল করার জন্য একটি স্নিপেট এখানে রয়েছে:

input[type='number'] {
    -moz-appearance:textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

<input id="test" type="number">

Comments

আন্তোঞ্জের উত্তর থেকে সেই 'মার্জিন: 0' হ'ল আমি যা ব্যবহার করেছি

— আসফ্যান্ড কাজী

আমি এটি মার্জিন ছাড়াই ব্যবহার করেছি এবং ঠিক আছে (2020))

— ক্রোফ

Answer 3

সংক্ষিপ্ত উত্তর:

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

<input type="number" />

দীর্ঘ উত্তর:

বিদ্যমান উত্তরে যুক্ত করতে ...

ফায়ারফক্স:

ফায়ারফক্সের বর্তমান সংস্করণগুলিতে এই উপাদানগুলির -moz-appearanceসম্পত্তিটির (ব্যবহারকারী এজেন্ট) ডিফল্ট মান number-input। মানটিতে এটি textfieldকার্যকরভাবে স্পিনারকে সরিয়ে দেয়।

input[type="number"] {
    -moz-appearance: textfield;
}

কিছু ক্ষেত্রে, আপনি স্পিনার প্রথমে লুকিয়ে থাকতে চান এবং তারপরে হোভার / ফোকাসে উপস্থিত হতে পারেন । (এটি বর্তমানে ক্রোমে ডিফল্ট আচরণ)। যদি তা হয় তবে আপনি নিম্নলিখিতটি ব্যবহার করতে পারেন:

input[type="number"] {
    -moz-appearance: textfield;
}
input[type="number"]:hover,
input[type="number"]:focus {
    -moz-appearance: number-input;
}

<input type="number"/>

---

ক্রোম:

ক্রোমের বর্তমান সংস্করণগুলিতে, এই উপাদানগুলির -webkit-appearanceসম্পত্তিটির (ব্যবহারকারী এজেন্ট) ডিফল্ট মান ইতিমধ্যে textfield। স্পিনার অপসারণ করার জন্য, -webkit-appearanceসম্পত্তি মান চাহিদা পরিবর্তন করা noneউপর ::-webkit-outer-spin-button/ ::-webkit-inner-spin-buttonছদ্ম শ্রেণীর (এটা হল -webkit-appearance: inner-spin-buttonডিফল্ট ভাবে)।

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

<input type="number" />

এটি উল্লেখ করার মতো যে margin: 0এটি ক্রোমের পুরানো সংস্করণগুলির মার্জিন অপসারণ করতে ব্যবহৃত হয় ।

বর্তমানে এটি লেখার মতো, এখানে 'ইন্টার্ন-স্পিন-বোতাম' সিউডো শ্রেণিতে ডিফল্ট ব্যবহারকারী এজেন্ট স্টাইলিং রয়েছে:

input::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button;
    display: inline-block;
    cursor: default;
    flex: 0 0 auto;
    align-self: stretch;
    -webkit-user-select: none;
    opacity: 0;
    pointer-events: none;
    -webkit-user-modify: read-only;
}

Comments

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

— রোজা

ফায়ারফক্স সমাধানে একটি গুরুত্বপূর্ণ যোগ করুন LI এই ===> ইনপুট [প্রকার = "সংখ্যা"] {-মোজ-উপস্থিতি: পাঠ্যক্ষেত্র! গুরুত্বপূর্ণ; }

— সাজ্জাদ সদেরী

Answer 4

মোবাইল সাফারির জন্য অ্যাপলের ব্যবহারকারীর অভিজ্ঞতা কোডিং গাইড অনুসারে , আপনি আইফোন ব্রাউজারে একটি সংখ্যক কীবোর্ড প্রদর্শন করতে নিম্নলিখিতটি ব্যবহার করতে পারেন:

<input type="text" pattern="[0-9]*" />

একজন patternএর \d*কাছে কাজ করবে।

Comments

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

— জানুয়ারী

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

— টোকিমন

এটি বর্তমানে সমস্ত ব্রাউজারে অ্যান্ড্রয়েডে কিছুই করে না। ব্রাউজার 4.2.2, ক্রোম 28 এবং অ্যান্ড্রয়েড 4.2 এ ফায়ারফক্স 23 এ এই পরীক্ষামূলক পৃষ্ঠায় পরীক্ষিত । এই ব্রাউজারগুলি কেবল এই মার্কআপের সাহায্যে মানক পাঠ্য কীবোর্ডটি দেখায়।

— ররি ও'কেনে

অ্যান্ড্রয়েড এবং আইওএস উভয়ের জন্য এখানে একটি দুর্দান্ত সমাধান: স্ট্যাকওভারফ্লো.com

— অ্যারন গ্রে

অ্যারোনগ্রিকে স্কয়ার একের দিকে ফিরে যান যদিও: সমাধানটিতে ডেস্কটপের জন্য স্পিনার রয়েছে।

— স্ট্রেঞ্জউইল

Answer 5

input type="tel"পরিবর্তে ব্যবহার করার চেষ্টা করুন । এটি সংখ্যা সহ একটি কীবোর্ড পপ করে, এবং এটি স্পিন বাক্সগুলি প্রদর্শন করে না। এটির জন্য কোনও জাভাস্ক্রিপ্ট বা সিএসএস বা প্লাগইন বা অন্য কিছু দরকার নেই।

Comments

এই সমাধানটি বর্তমানে কোনও ব্রাউজারে কোনও বৈধতা type=numberদেয় না।

— পেপিজন

টেলিফোন কীবোর্ড হিসাবে ভাল হিসাবে নয় নম্বর কীবোর্ড যদিও এটা চেয়ে অনেক ভালো, টেক্সট কীবোর্ড । টেলিফোন কীবোর্ডে অপ্রাসঙ্গিক অক্ষর এবং চিহ্ন রয়েছে যা নম্বর কীবোর্ড থেকে বাদ দেওয়া হয়। ( অ্যান্ড্রয়েড 2.২ এ এই পৃষ্ঠার সাথে পরীক্ষিত ))

— ররি ও'কেনে

এমন কিছু নেই "." টেলিফোনের কীবোর্ডে: - <

— gion_13

@ ররিও'কেনে নম্বর কীবোর্ডটির একটি বড় অসুবিধা রয়েছে যা এটি কোনও ইনপুট অস্বীকার করবে যা কোনও সংখ্যা নয়।

— জোখেম কুয়েজ্পার্স

এটি কোনও সমাধান নয় এবং এইচটিএমএল 5 এর মান দ্বারা এটি বোকা। ইনপুট [টেলিফোন] ফোন নম্বরগুলির জন্য, ইনপুট [নম্বর] ভাসমান পয়েন্ট সহ জেনেরিক সংখ্যাগুলির জন্য। সুতরাং এটি কোনও সমাধান নয়।

— ভাসিল পপভ

Answer 6

সংখ্যার ইনপুটটিতে স্পিনারকে সরাতে কেবল এই সিএসএস যুক্ত করুন

/* For Firefox */

input[type='number'] {
    -moz-appearance:textfield;
}



/* Webkit browsers like Safari and Chrome */

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

Comments

ক্যানিউজ অনুসারে input[type=number]{ -webkit-appearance }ক্রোমের জন্য পর্যাপ্ত পরিমাণে হওয়া উচিত, তবে অবশ্যই আপনাকে ছদ্ম-উপাদানগুলিও সংশোধন করতে হবে। কোন ধারণা কেন ??

— ওল্ডবয়

Answer 7

আমি এই সমস্যার সাথে একটি এর মুখোমুখি হয়েছি input[type="datetime-local"]যা এই সমস্যার সাথে সমান।

এবং আমি এই জাতীয় সমস্যাগুলি কাটিয়ে উঠার একটি উপায় খুঁজে পেয়েছি।

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

তারপরে আপনি সমস্ত ছায়া গোছানো DOM উপাদান দেখতে পাবেন , উদাহরণস্বরূপ, <input type="number">ছায়া গোছানো DOM সহ সম্পূর্ণ উপাদানটি হ'ল:

<input type="number">
  <div id="text-field-container" pseudo="-webkit-textfield-decoration-container">
    <div id="editing-view-port">
      <div id="inner-editor"></div>
    </div>
    <div pseudo="-webkit-inner-spin-button" id="spin"></div>
  </div>
</input>

এবং এই তথ্য অনুসারে, আপনি @ জোশ যেমন বলেছিলেন তেমন অযাচিত উপাদানগুলি লুকানোর জন্য আপনি কিছু সিএসএস খসড়া করতে পারেন।

Answer 8

আপনি যা চেয়েছিলেন তা নয়, তবে স্পিনবক্সগুলি সহ ওয়েবকিতে ফোকাস বাগের কারণে আমি এটি করছি:

// temporary fix for focus bug with webkit input type=number ui
if (navigator.userAgent.indexOf("AppleWebKit") > -1 && navigator.userAgent.indexOf("Mobile") == -1)
{
    var els = document.querySelectorAll("input[type=number]");
    for (var el in els)
        el.type = "text";
}

এটি আপনাকে যা প্রয়োজন তা সহায়তা করার জন্য একটি ধারণা দিতে পারে।

Comments

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

— অ্যালান

Answer 9

এটি আরও ভাল উত্তর হ'ল আমি মাউস ওভার ছাড়াই এবং মাউস ছাড়াই পরামর্শ দিতে চাই

input[type='number'] {
  appearance: textfield;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button,
input[type='number']:hover::-webkit-inner-spin-button, 
input[type='number']:hover::-webkit-outer-spin-button {
-webkit-appearance: none; 
 margin: 0; }

Comments

কি margin: 0অর্জন? এছাড়াও, spin-buttonসিউডো-এলিমেন্টগুলি hoverনতুন ব্রাউজারগুলিতে ট্রিগার হতে পারে বলে মনে হচ্ছে না ?

— oldboy

Answer 10

সাফারিতে এই কাজটি করার জন্য আমি খুঁজে পেলাম ওয়েবকিট সামঞ্জস্যের জন্য গুরুত্বপূর্ণটি স্পিন বোতামটি লুকিয়ে রাখতে বাধ্য করে।

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none !important;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

অপেরার জন্যও সমাধান সমাধান করতে আমার এখনও সমস্যা হচ্ছে।

Answer 11

উবুন্টুর জন্য ফায়ারফক্সে, কেবল ব্যবহার করে

    input[type='number'] {
    -moz-appearance:textfield;
}

আমার জন্য কৌশলটি।

যোগ করার পদ্ধতি

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

আমাকে যেতে হবে

অজানা সিউডো-ক্লাস বা সিউডো-উপাদান '-ওয়েবেকিট-আউটডোর-স্পিন-বোতাম'। খারাপ নির্বাচকের কারণে নিয়মটি উপেক্ষা করা হয়েছে।

প্রতিবার আমি চেষ্টা করেছি অভ্যন্তরীণ স্পিন বোতামের জন্য একই।

Comments

-webkit-*ক্রোমের জন্য, -moz-*মজিলা ফায়ারফক্সের জন্য। এ কারণেই এটি আপনার পক্ষে কার্যকর হয়নি।

— গুস্তাস্তভভ গিল

Answer 12

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {
     -webkit-appearance: none;

<input id="test" type="number">

Comments

এই উত্তর ইতিমধ্যে বেশ কয়েকবার দেওয়া হয়েছে। এটি একটি নতুন জবাব দেওয়ার আগে বিদ্যমান উত্তরগুলি পড়তে সহায়তা করে, যদি নতুন একটি সদৃশ হয়।

— ড্যান ড্যাসক্লেস্কু

Answer 13

আপনি কোনও স্পিনার না চাইলে জাভাস্ক্রিপ্ট সহ নম্বর ইনপুটটি টেক্সট ইনপুটটিতে পরিবর্তন করতে পারেন;

document.getElementById('myinput').type = 'text';

এবং ব্যবহারকারী পাঠ্যে প্রবেশ বন্ধ করুন;

  document.getElementById('myinput').onkeydown = function(e) {
  if(!((e.keyCode > 95 && e.keyCode < 106)
    || (e.keyCode > 47 && e.keyCode < 58) 
    || e.keyCode == 8
    || e.keyCode == 9)) {
          return false;
      }
  }

তারপরে আপনি কোনও স্পিনার চাইলে জাভাস্ক্রিপ্টটি আবার পরিবর্তন করুন;

document.getElementById('myinput').type = 'number';

এটি আমার উদ্দেশ্যে ভাল কাজ করেছে

Answer 14

ওয়েবকিট এবং ব্লিঙ্ক-ভিত্তিক ব্রাউজারগুলিতে এবং সমস্ত ধরণের ব্রাউজারে নিম্নলিখিত সিএসএস ব্যবহার করুন:

/* Disable Number Arrow */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

Comments

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

— জেসন অ্যালার

Answer 15

কাজ করার জন্য আমার এটি দরকার ছিল

/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button
  -webkit-appearance: none
  appearance: none
  margin: 0

/* Firefox */
input[type=number]
  -moz-appearance: textfield

অতিরিক্ত লাইনটি appearance: noneআমার কাছে কী ছিল।