এইচটিএমএল 5: সংখ্যার ইনপুট টাইপ যা কেবল পূর্ণসংখ্যায় লাগে?

249

আমি jQuery সরঞ্জাম যাচাইকারী ব্যবহার করছি যা jQuery এর মাধ্যমে HTML5 বৈধকরণ প্রয়োগ করে। এটি এখন পর্যন্ত দুর্দান্ত কাজ করছে একটি জিনিস বাদ দিয়ে। এইচটিএমএল 5 স্পেসিফিকেশনে ইনপুট টাইপ "নম্বর" এর উভয়ই পূর্ণসংখ্যা এবং ভাসমান-পয়েন্ট নম্বর থাকতে পারে। এটি অবিশ্বাস্যরূপে সংক্ষিপ্ত দৃষ্টিযুক্ত বলে মনে হয় কারণ এটি কেবল তখনই আপনার কার্যকর ডাটাবেইডার হয়ে যাবে যখন আপনার ডাটাবেস ক্ষেত্রগুলি ভাসমান-পয়েন্ট সংখ্যাগুলিতে স্বাক্ষরিত হয় (স্বাক্ষরযুক্ত ইনটগুলির জন্য আপনাকে "প্যাটার্ন" বৈধকরণে ফিরে যেতে হবে এবং এভাবে উপরে এবং নীচের মতো অতিরিক্ত বৈশিষ্ট্যগুলি হারাতে হবে এটি সমর্থনকারী ব্রাউজারগুলির জন্য তীরগুলি)। অন্য কোনও ইনপুট টাইপ বা সম্ভবত কোনও অ্যাট্রিবিউট আছে যা ইনপুটটিকে কেবল স্বাক্ষরবিহীন পূর্ণসংখ্যার মধ্যে সীমাবদ্ধ করবে? ধন্যবাদ আমি কিছুই খুঁজে পেলাম না।

সম্পাদনা

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

jquery  html  validation  jquery-tools 
— JayPea
সূত্র
3
2019 হিসাবে — আমি জানি না কখন থেকে — numberইনপুটটি (কমপক্ষে এফএফ / ক্রোম / সাফারিতে) কেবলমাত্র পূর্বনির্ধারিতভাবে পূর্ণসংখ্যা গ্রহণ করে, যদি না আপনি stepঅ্যাট্রির জন্য একটি সুস্পষ্ট মান সেট করেন যা দশমিক মানগুলিকে অনুমতি দেয়; উদাহরণ: step="0.01"। দলিলযুক্ত এমডিএন এখানে । এই সম্পর্কে দুটি মনে কারণ আমি মনে করি এটি একটি বুদ্ধিমান ডিফল্ট, তবে একটি ব্রেকিং পরিবর্তন (হ্যাঁ, এটি আমার লেখা কিছু কোডকে প্রভাবিত করেছে)।
— দারাগ এনরাট

উত্তর:

326

https://www.w3.org/wiki/HTML/Elements/input/number

আপনি এইচটিএমএল দিয়ে সর্বাধিক অর্জন করতে পারেন

<input type="number" min="0" step="1"/>
স্নিপেট প্রসারিত করুন

— অরলিয়েন ওমস
সূত্র
6
তিনি সম্ভবত ইতিবাচক সংখ্যা চান হিসাবে সেট minকরা উচিত 1(এবং অ-নেতিবাচক সংখ্যা নয়)।
— মার্টিন থোমা
1
@pwdst আমি এটি দ্বিতীয় করব। <input type="number" min="0" step="1"/>প্রশ্নের সর্বাধিক সঠিক উত্তর। যাইহোক, উভয় step="1"এবং উভয় থাকার মানে কি pattern="\d+"? আমি উভয় ক্ষেত্রেই ভাসমান পয়েন্ট সংখ্যা টাইপ করতে পারি না।
— ড্যানিশ আশফাক
27
এটি ক্রোমের সর্বশেষ সংস্করণে আমার পক্ষে কাজ করে নি। এটি অক্ষরগুলি টাইপ করার অনুমতি দেয় না তবে এটি বিশেষ অক্ষরগুলি সন্নিবেশ করার অনুমতি দেয়।
— মালভোস
2
আমি কেন ই টাইপ করতে পারি
— সূর্য অনুদান দিন
3
সূচকীয় সংখ্যাগুলির জন্য @ গ্রানসুন যেমন 10e20।
— sn3ll
180

stepবৈশিষ্ট্যটি এতে সেট করুন 1:

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

এখনই ক্রোমে এটি কিছুটা বগি বলে মনে হচ্ছে তাই এই মুহুর্তে এটি সেরা সমাধান হতে পারে না।

আরও ভাল সমাধানটি patternবৈশিষ্ট্যটি ব্যবহার করা হয় যা ইনপুটটির সাথে মেলে নিয়মিত প্রকাশ করে:

<input type="text" pattern="\d*" />

\dকোনও সংখ্যার জন্য নিয়মিত প্রকাশ, এর *অর্থ এটি এর মধ্যে একটিরও বেশি গ্রহণ করে। এখানে ডেমো: http://jsfiddle.net/b8NrE/1/

— JS-সংকেতপদ্ধতিরচয়িতা
সূত্র
2
জেপিয়া যেমন শিখেছে, সমস্ত ব্রাউজারগুলি এখনও সব এইচটিএমএল 5 উপাদান সমর্থন করে না, তাই আপনার প্রস্তাব অনুসারে গ্রেফিউল ডিগ্রিং প্রদান করা ভাল।
— ডেকে
6
@ জুট এইচটিএমএল 5 বৈধতা আপনাকে এই কীগুলিতে প্রবেশ করতে বাধা দেয় না। এটি কেবল এই অক্ষরগুলির সাথে ফর্মটি প্রেরণ করা থেকে বাধা দেয়। আপনি যদি numberঅন্য অক্ষরযুক্ত টাইপের ইনপুট সহ কোনও ফর্ম জমা দেন তবে Chrome আপনাকে একটি ত্রুটি বার্তা প্রদর্শন করবে show
— জেএস-কোডার
2
@ ডটওয়েব - আমি আপনার বক্তব্যটি দেখতে পাচ্ছি উভয়ের মধ্যে পার্থক্য হ'ল সংখ্যার বৈশিষ্ট্যের সাথে, আমি যখন ইনপুটটির জন্য (ট্রিগার অস্পষ্টতা) অনির্বাচিত করে সমস্ত বর্ণমালা অক্ষর স্বয়ংক্রিয়ভাবে সরিয়ে ফেলা হয়। প্যাটার্ন বৈশিষ্ট্যটি ব্যবহার করার সময় এটি ঘটে না। আমি অনুমান করি যে এই পার্থক্যটি কেবলমাত্র তখনই গুরুত্বপূর্ণ যখন আপনি আপনার ডেটা পোস্ট করতে AJAX ব্যবহার করছেন এবং আপনি submitপোস্টটি ট্রিগার করার চেয়ে অন্য কোনও ইভেন্ট ব্যবহার করছেন ।
— Zut
6
এটি ওপি যা বলেছিল তা করে না। কেবল পূর্ণসংখ্যা /\d*/.test(1.1) // true
— vsync
2
@vsync pattern="\d*"হিসাবে একই নয় /\d*/, pattern="\d*"সমান হয় /^(?:\d*)$/, দয়া করে পড়ুন HTML5 এর প্যাটার্ন অ্যাট্রিবিউট ডকুমেন্টেশন ।
— উইক্টর স্ট্রিবিউউ
36 
<input type="text" name="Phone Number" pattern="[0-9]{10}" title="Phone number">

এই কোডটি ব্যবহার করে পাঠ্য ক্ষেত্রের ইনপুটটি কেবলমাত্র অঙ্কগুলিতে সীমাবদ্ধ করে। প্যাটার্ন হ'ল এইচটিএমএল 5 এ উপলব্ধ নতুন বৈশিষ্ট্য।

প্যাটার্ন বৈশিষ্ট্য ডক

— thejustv
সূত্র
9
মতে স্পেসিফিকেশন প্যাটার্ন অ্যাট্রিবিউট শুধুমাত্র ব্যবহার করা যেতে পারে যেখানে ইনপুট প্রকার লেখা, অনুসন্ধান, URL টি, টেলিফোন, ই-মেইল, পাসওয়ার্ড (হিসাবে "পাঠ্য" ধরনের সঙ্গে এখানে দেখানো)। এর অর্থ হ'ল সংখ্যার ইনপুট ধরণের শব্দার্থক শব্দগুলি এবং তাই (গুরুত্বপূর্ণভাবে) কিছু ট্যাবলেট এবং ফোনের সংখ্যাসূচক স্ক্রীন কীবোর্ডগুলি এই পদ্ধতিটি ব্যবহার করার পরে হারিয়ে যায়।
— pwdst
3
এটি ফায়ারফক্স 36.0 এ আপনাকে অক্ষর এবং বিশেষ অক্ষর টাইপ করতে দেয়।
— মালাভোস
এটি কেবলমাত্র সংখ্যার মধ্যে ইনপুট সীমাবদ্ধ করে না, আপনি এখনও অক্ষর টাইপ করতে পারেন!
— হাদিদআলি
35

জাভাস্ক্রিপ্ট ব্যবহার করার সহজ উপায়:

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" >
— তারেক কালাজি
সূত্র
আমি বুঝতে পারি নাreplace(/(\..*)\./g, '$1')
— codyc4321
3
এটি ভাসমান সংখ্যা গ্রহণ করা এবং .শুধুমাত্র একবারে পুনরাবৃত্তি করা গুরুত্বপূর্ণ , যেমন 123.556রাইটেন হতে পারে।
— তারেক কালাজি
8
@ তারেককালাজি - প্রশ্নগুলিতে পূর্ণসংখ্যার কথা বলা হয়েছে এবং ভাসমান সংখ্যা নয়
— ভিএনসিঙ্ক
কীভাবে মোবাইল ডিভাইস? কারণ পাঠ্যগুলি সমস্ত কীবোর্ড প্রদর্শন করে (বর্ণানুক্রমিক অক্ষরগুলিও)
— নূরী
27

প্যাটার্নটি দুর্দান্ত তবে আপনি যদি কেবল টাইপ = "টেক্সট" দিয়ে সংখ্যায় সীমাবদ্ধ করতে চান তবে আপনি অনিনপুট এবং নীচে হিসাবে একটি রেজেক্স ব্যবহার করতে পারেন:

<input type="text" oninput="this.value=this.value.replace(/[^0-9]/g,'');" id="myId"/>

আমি আমার জন্য warks :)

— ভিক্টর কার্পিউক
সূত্র
সাবধান থাকুন যে এই পদ্ধতিটি আপনার (পরিবর্তন) পদ্ধতিটিকে (ইভেন্ট হ্যান্ডলার) উপেক্ষা করতে পারে এবং ইনপুট বাক্সে আপনার ডিফল্ট মানটিও মুছে ফেলতে পারে।
— হাদিদলি
14

এটি কেবল এইচটিএমএল 5 এর জন্য নয়, সমস্ত ব্রাউজার ঠিকঠাক কাজ করছে। এটা চেষ্টা কর 

onkeyup="this.value=this.value.replace(/[^0-9]/g,'');"
— চিতাবাঘ
সূত্র
12
এইটা খারাপ. ইনপুট চেষ্টা করে দেখুন: শিফট + হোম, শিফট + এন্ড, সিটিআরএল + এ, সিটিআরএল + সি, সিটিআরএল + ভি। oninputপরিবর্তে ব্যবহার করুন
— যান্ডারওয়ার
1
যখন এই উত্তরটি লেখা হয়েছিল, HTML5 প্রকাশিত হয়নি। @ জ্যাঞ্জারওয়ার
— মুহাম্মাদ
11

প্যাটার্ন সবসময় সীমাবদ্ধতা জন্য বাঞ্ছনীয় হয়, চেষ্টা oninputএবং min1 থেকেই শুধুমাত্র সংখ্যা ইনপুট করার জন্য ঘটতে 1

<input type="text" min="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');"
                                value=${var} >
— নুথান yv
সূত্র
এটি খুব তাত্পর্যপূর্ণ সমাধান। `Value = $ {var}` এর জন্য কী?
— বিকাশকারী
যে ইনপুট জন্য @AcademyofProgrammer উদাহরণ ডিফল্ট মান
— Shinigamae
সর্বোত্তম উত্তর! পেস্টিংয়ের জন্য কাজ করে, আইই (10+) তেও কাজ করে, আপনাকে ইনপুট প্রকারের মাধ্যমে যে কোনও কীবোর্ড প্রদর্শন করার স্বাধীনতা দেয় এবং ক্রোম প্রদর্শনটি ক্ষেত্রের অভ্যন্তরে এই নিভর আপ / ডাউন তীরগুলি প্রদর্শন করে না।
— জানোশ
5

আপনি কি step1 এর মতো এট্রিবিউটটি সেট করার চেষ্টা করেছেন?

<input type="number" step="1" />
— DevTeamExpress
সূত্র
3

হ্যাঁ, এইচটিএমএল 5 করে। এই কোডটি চেষ্টা করুন ( w3school ):

<!DOCTYPE html>
<html>
<body>

<form action="">
  Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5" />
  <input type="submit" />
</form>

</body>
</html>

সর্বনিম্ন এবং সর্বোচ্চ প্যারামিটারটি দেখুন? আমি এটি Chrome 19 (কাজ করা) এবং ফায়ারফক্স 12 (কাজ করেনি) ব্যবহার করে চেষ্টা করেছি।

— wilsonfoz
সূত্র
এটি ধরে নিয়েছে যে আপনি একটি পরিচিত পরিসর চান। তবে আপনি যদি কোনও পূর্ণসংখ্যার মান চান তবে এটি কি এখনও কার্যকর হবে?
— এলোমেলো হ্যান্ডল
3

এটি কেবল আপনার ইনপুট ক্ষেত্রে রেখে দিন: onkeypress='return event.charCode >= 48 && event.charCode <= 57'

— illeas
সূত্র
3

আমি ওহো ক্রোম কাজ করছিলাম এবং আমি কিছু কিছু সমস্যা ছিল যদিও আমি এইচটিএমএল বৈশিষ্ট্যগুলি ব্যবহার করি। আমি এই জেএস কোড দিয়ে শেষ করেছি

$("#element").on("input", function(){
        var value = $(this).val();

        $(this).val("");
        $(this).val(parseInt(value));

        return true;
});
— a.valchev
সূত্র
আমি এটি ব্যবহার করে শেষ করেছি 1 টি ছোটখাটো টুইটও; আমি পার্সেন্ট (মান) কে পার্সেন্ট (মান.রেপ্লেস ('।', '') তে পরিবর্তন করেছি This এটি আমাকে 1.56 আটকানো এবং প্রদর্শিত মান 1 এর পরিবর্তে 156 এ রাখার অনুমতি দেয়
— কোডসোব্লাবর
2

চশমা থেকে

step="any"বা ধনাত্মক ভাসমান-পয়েন্ট নম্বর
উপাদানটির মানের গ্রানুলারিটি নির্দিষ্ট করে।

সুতরাং আপনি কেবল এটিকে সেট করতে পারেন 1:

— ডেভিড হেডলুন্ড
সূত্র
8
আমি এটি চেষ্টা করেছি তবে সমস্যাটি হচ্ছে আপনি এখনও পাঠ্য বাক্সে একটি ভাসমান পয়েন্ট নম্বর টাইপ করতে পারেন।
— জয়পিয়া
সুতরাং, আপনার এমন কোড দরকার যা ব্যবহারকারীকে দশমিক পয়েন্ট টাইপ করতে বাধা দেয়?
— ব্লেজমোনজার
2

stepযে কোনও ফ্লোট সংখ্যার জন্য অ্যাট্রিবিউট সেট করুন , যেমন 0.01 এবং আপনি যেতে ভাল go

— মান্টাস কে।
সূত্র
1 
var valKeyDown;
var valKeyUp;


function integerOnly(e) {
    e = e || window.event;
    var code = e.which || e.keyCode;
    if (!e.ctrlKey) {
        var arrIntCodes1 = new Array(96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 8, 9, 116);   // 96 TO 105 - 0 TO 9 (Numpad)
        if (!e.shiftKey) {                          //48 to 57 - 0 to 9 
            arrIntCodes1.push(48);                  //These keys will be allowed only if shift key is NOT pressed
            arrIntCodes1.push(49);                  //Because, with shift key (48 to 57) events will print chars like @,#,$,%,^, etc.
            arrIntCodes1.push(50);
            arrIntCodes1.push(51);
            arrIntCodes1.push(52);
            arrIntCodes1.push(53);
            arrIntCodes1.push(54);
            arrIntCodes1.push(55);
            arrIntCodes1.push(56);
            arrIntCodes1.push(57);
        }
        var arrIntCodes2 = new Array(35, 36, 37, 38, 39, 40, 46);
        if ($.inArray(e.keyCode, arrIntCodes2) != -1) {
            arrIntCodes1.push(e.keyCode);
        }
        if ($.inArray(code, arrIntCodes1) == -1) {
            return false;
        }
    }
    return true;
}

$('.integerOnly').keydown(function (event) {
    valKeyDown = this.value;
    return integerOnly(event);
});

$('.integerOnly').keyup(function (event) {          //This is to protect if user copy-pastes some character value ,..
    valKeyUp = this.value;                          //In that case, pasted text is replaced with old value,
    if (!new RegExp('^[0-9]*$').test(valKeyUp)) {   //which is stored in 'valKeyDown' at keydown event.
        $(this).val(valKeyDown);                    //It is not possible to check this inside 'integerOnly' function as,
    }                                               //one cannot get the text printed by keydown event 
});                                                 //(that's why, this is checked on keyup)

$('.integerOnly').bind('input propertychange', function(e) {    //if user copy-pastes some character value using mouse
    valKeyUp = this.value;
    if (!new RegExp('^[0-9]*$').test(valKeyUp)) {
        $(this).val(valKeyDown);
    }
});
— Sarthak
সূত্র
0

বর্তমানে, কেবলমাত্র এইচটিএমএল দিয়ে কোনও ব্যবহারকারীকে আপনার ইনপুটটিতে দশমিক মান লিখতে বাধা দেওয়া সম্ভব নয়। আপনাকে জাভাস্ক্রিপ্ট ব্যবহার করতে হবে।

— মাইকেল
সূত্র
-2

ভবিষ্যতে ™ ( আমি কী ব্যবহার করতে পারি দেখুন ) তে আপনার কাছে কীবোর্ড উপস্থাপনকারী ব্যবহারকারী এজেন্টগুলিতে আপনি একটি পাঠ্য ইনপুটকে কেবল সংখ্যাসূচকভাবে সীমাবদ্ধ রাখতে পারেন input[inputmode]।

— Weston
সূত্র
inputmodeবেশিরভাগ হ্যান্ড-হোল্ড ডিভাইসগুলির জন্য এবং সঠিক কীবোর্ড লেআউটটিকে ট্রিগার করবে তবে কীবোর্ড সহ "সাধারণ" কম্পিউটারগুলির জন্য, এটি আপনি যা চান তা প্রবেশ করতে বাধা দেয় না।
— vsync
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.