এইচটিএমএল পাঠ্য ইনপুট কেবল সংখ্যাগত ইনপুটকে অনুমতি দেয়

Question

এইচটিএমএল পাঠ্য ইনপুট ( <input type=text />) কেবলমাত্র সংখ্যাসূচক কীস্ট্রোক (প্লাস '।') কে মঞ্জুরি দেওয়ার জন্য কী উপায় আছে?

Comments

এখানে অনেকগুলি সমাধান কেবল তখনই চাপায় যখন কীগুলি চাপানো হয়। লোকেরা মেনুটি ব্যবহার করে পাঠ্য পেস্ট করে, বা তারা টেক্সট ইনপুটটিতে টানতে এবং টানলে তা ব্যর্থ হবে। আমাকে এর আগেও কামড়েছে। সাবধান হও!

— বেনেট ম্যাকএলউই 21

@ জুলিয়াসএ - আপনার সর্বদা সর্বদা যাইহোক সার্ভার-সাইডের বৈধতা প্রয়োজন।

— স্টিফেন পি

<input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57'></input>

— Droogans

@ ড্রাগানরা লক্ষ্য করে যে পরবর্তী ইনপুটটিতে যাওয়ার জন্য ট্যাব বা অন্য কোনও শর্টকাট বা ইনপুট কেন্দ্রীভূত থাকলে ওয়েবসাইটকে রিফ্রেশ করার জন্য সিএমডি + আর এর মতো সরাসরি ইনপুটটির সাথে সরাসরি জড়িত নয় এমন কোনও শর্টকাট যেতে অক্ষম করে।

— আলেজান্দ্রো পেরেজ

আপনি যদি প্লাগিনের সাথে ঠিক থাকেন তবে সংখ্যাযুক্ত ইনপুট ব্যবহার করুন। ডেমো: jsfiddle.net/152sumxu/2 আরো বিস্তারিত এখানে stackoverflow.com/a/27561763/82961

— ফয়েজ

Answer 1

^{বিঃদ্রঃ: এটি একটি আপডেট করা উত্তর। নীচের মন্তব্যগুলিতে একটি পুরানো সংস্করণ উল্লেখ করা হয়েছে যা কীকোডগুলির সাথে চারপাশে গোলযোগ করেছিল।}

জাভাস্ক্রিপ্ট

এটি নিজে জেএসফিডেলে চেষ্টা করে দেখুন ।

আপনি <input>নিম্নলিখিত setInputFilterফাংশনটির সাহায্যে কোনও পাঠ্যের ইনপুট মানগুলি ফিল্টার করতে পারেন (অনুলিপি + পেস্ট করুন, টেনে আনুন + ড্রপ করুন, কীবোর্ড শর্টকাটগুলি, প্রসঙ্গ মেনু অপারেশনগুলি, টাইপযোগ্য নয় কীগুলি, ক্যারেটের অবস্থান, বিভিন্ন কীবোর্ড লেআউট এবং আই 9 এর পরে সমস্ত ব্রাউজারগুলি ) :

// Restricts input for the given textbox to the given inputFilter function.
function setInputFilter(textbox, inputFilter) {
  ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
    textbox.addEventListener(event, function() {
      if (inputFilter(this.value)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      } else {
        this.value = "";
      }
    });
  });
}

আপনি এখন setInputFilterএকটি ইনপুট ফিল্টার ইনস্টল করতে ফাংশনটি ব্যবহার করতে পারেন :

setInputFilter(document.getElementById("myTextBox"), function(value) {
  return /^\d*\.?\d*$/.test(value); // Allow digits and '.' only, using a RegExp
});

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

টাইপরাইটারে মুদ্রি

এটির একটি টাইপস্ক্রিপ্ট সংস্করণ এখানে।

function setInputFilter(textbox: Element, inputFilter: (value: string) => boolean): void {
    ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
        textbox.addEventListener(event, function(this: (HTMLInputElement | HTMLTextAreaElement) & {oldValue: string; oldSelectionStart: number | null, oldSelectionEnd: number | null}) {
            if (inputFilter(this.value)) {
                this.oldValue = this.value;
                this.oldSelectionStart = this.selectionStart;
                this.oldSelectionEnd = this.selectionEnd;
            } else if (Object.prototype.hasOwnProperty.call(this, 'oldValue')) {
                this.value = this.oldValue;
                if (this.oldSelectionStart !== null &&
                    this.oldSelectionEnd !== null) {
                    this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
                }
            } else {
                this.value = "";
            }
        });
    });
}

jQuery এর

এটির একটি জিকুয়ের সংস্করণও রয়েছে। এই উত্তর দেখুন ।

এইচটিএমএল 5

এইচটিএমএল 5 এর একটি নেটিভ সমাধান রয়েছে <input type="number">( স্পেসিফিকেশনটি দেখুন ), তবে নোট করুন যে ব্রাউজার সমর্থনটি পরিবর্তিত হয়:

• বেশিরভাগ ব্রাউজার কেবল ফর্মটি জমা দেওয়ার সময় ইনপুটটিকে বৈধতা দেবে, টাইপ করার সময় নয়।
• সর্বাধিক মোবাইল ব্রাউজারে সমর্থন করে না step, minএবং maxবৈশিষ্ট্যাবলী।
• ক্রোম (সংস্করণ 71.0.3578.98) এখনও ব্যবহারকারীকে অক্ষর eএবং Eক্ষেত্রের মধ্যে প্রবেশ করতে দেয়। আরো দেখুন এই প্রশ্নের ।
• ফায়ারফক্স (64৪.০ সংস্করণ) এবং এজ (এজএইচটিএমএল সংস্করণ 17.17134) এখনও ব্যবহারকারীকে ক্ষেত্রের মধ্যে কোনও পাঠ্য প্রবেশ করার অনুমতি দেয় ।

W3schools.com এ নিজে চেষ্টা করুন ।

Comments

যদিও এটি একটি ভাল পছন্দ হবে, এটি এখনও /, একাধিক বিন্দু, অন্যান্য অপারেটর ইত্যাদির মতো অক্ষরগুলিতে প্রবেশ করতে দেয়

— মহেন্দ্র লিয়া

ফায়ারফক্স 21 দ্বারা এখনও সমর্থিত নয় (আমি এমনকি আই 9 বা তার আগের সংস্করণ সম্পর্কেও কথা বলি না ...)

— জেবিই

ইনপুট টাইপ নম্বরটি কেবল আপনার ইনপুটটিকে কেবল সংখ্যা গ্রহণ করার জন্য ব্যবহার করা হয় না। এটি ইনপুটগুলির জন্য যা একটি 'আইটেমের সংখ্যা' নির্দিষ্ট করে specify উদাহরণস্বরূপ ক্রোম একটি করে সংখ্যা হ্রাস করার জন্য দুটি ছোট তীর যুক্ত করে। একটি উপযুক্ত সংখ্যা-কেবল ইনপুট হ'ল এইচটিএমএলকে এক ধরণের হাস্যকর বাদ দেওয়া।

— ইরউইন

টাইপ = "সংখ্যা" ক্ষেত্রের মধ্যে অবৈধ পাঠ্য প্রবেশ করতে বাধা দেয় না; মনে হয় আপনি এমনকি জঞ্জাল ডেটা কেটে ফেলতে পারবেন এমনকি ক্রোমেও garbage

— পারফেকশনিস্ট

কেবলমাত্র আমি এতে যুক্ত করব (e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true))

— ম্যাকোএসএক্স

Answer 2

এই ডোম ব্যবহার করুন

<input type='text' onkeypress='validate(event)' />

এবং এই স্ক্রিপ্ট

function validate(evt) {
  var theEvent = evt || window.event;

  // Handle paste
  if (theEvent.type === 'paste') {
      key = event.clipboardData.getData('text/plain');
  } else {
  // Handle key press
      var key = theEvent.keyCode || theEvent.which;
      key = String.fromCharCode(key);
  }
  var regex = /[0-9]|\./;
  if( !regex.test(key) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
}

Comments

একটি eeepc 900 উপর জার্মান-সেটিংস কিছু কি ভাল জন্য এর usabiliy কাজ করে না: - ব্যাকস্পেস (keyCode: 8) - গৌণ কী বাম এবং ডান (keyCode: 37, 38) কপি করে পেস্ট করুন সম্ভব ...

— মাইকেল Piendl

বেশিরভাগ লোক যত্ন করে, স্ক্রিপ্টের ত্রুটি দেখাতে আপনার সাইটে খারাপ প্রতিফলিত করে।

— রবার্ট জেপ্পেসেন

এই কোডটি নিয়ে কয়েকটি সমস্যা। আপনি প্রবেশ করতে পারেন। একাধিকবার, দ্বিতীয় এটি কী, কোনও সমাধান মুছতে দেয় না?

— coure2011

আমি ব্যাকস্পেসের যত্ন, মুছে ফেলা এবং তীরগুলি কাজ করছে না। আপনি যদি "TheEve.keycode ||" সরিয়ে থাকেন এবং যোগ করেন: "যদি (/ [- ~] / &&! Regex.test (কী)) {" তবে এটি আরও ভাল কাজ করে (এএসসিআইআই / ইউটিএফের জন্য যাইহোক)। তবে তারপরে এটি চীনা চরিত্রগুলি প্রত্যাখ্যান করবে না! :)

— স্যাম ওয়াটকিন্স

এটি কাউকে

— ইনপুটটিতে

Answer 3

আমি এর ভাল উত্তরের জন্য দীর্ঘ এবং কঠোর অনুসন্ধান করেছি এবং আমাদের খুব তাগিদ করা দরকার <input type="number", তবে এর চেয়ে সংক্ষেপে, এই 2 টি আমি নিয়ে আসা সবচেয়ে সংক্ষিপ্ত উপায়:

<input type="text" 
       onkeyup="this.value=this.value.replace(/[^\d]/,'')">

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

<input type="text" 
onkeydown="return ( event.ctrlKey || event.altKey 
                    || (47<event.keyCode && event.keyCode<58 && event.shiftKey==false) 
                    || (95<event.keyCode && event.keyCode<106)
                    || (event.keyCode==8) || (event.keyCode==9) 
                    || (event.keyCode>34 && event.keyCode<40) 
                    || (event.keyCode==46) )">

Comments

ইনপুট টাইপ = "নম্বর" টি এইচটিএমএল 5 এ আসছে - এবং আপনি জাভাস্ক্রিপ্টটি ফ্যাল-ব্যাক পলিফিল হিসাবে ব্যবহার করতে পারেন ... stevefenton.co.uk/Content/Blog/Date/201105/Blog/…

— ফেন্টন

ভাল পদ্ধতি তবে একটি অগ্রহণযোগ্য কী টিপে চেপে ধরে ভাঙ্গা যায়

— স্কট ব্রাউন

রেজেক্স এ পরিবর্তন করুন /[^\d+]/এবং এটি ধরে রাখার সাথে কাজ করে

— বোইকো

@ বোইকো এর জন্য ধন্যবাদ, তবে মনে রাখবেন যে এটির /[^\d]+/পরিবর্তে হওয়া উচিত । ভাল সমাধান যদিও। এছাড়াও @ ব্যবহারকারী 235859

— মোসেলম্যান

সেও অনুমতি দিতে চেয়েছিল .। আপনার আসলে এটি করা উচিত/[^0-9.]/g

— কাসারিও

Answer 4

এখানে একটি সাধারণ যা হ'ল এক দশমিক জন্য অনুমতি দেয়, কিন্তু আর নয়:

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

Comments

হ্যান্ডেলগুলি: অনুলিপি + পেস্ট করুন, টেনে আনুন না, কেবল 1 দশমিক, ট্যাব, মুছুন, ব্যাকস্পেসের অনুমতি দেয় - এটি ব্যবহার করুন

— গণিত

অনিনপুটের অভ্যন্তরে এই যুক্তিটি কী এমনভাবে বের করা যেতে পারে যাতে বিশ্বব্যাপী ব্যবহার করা যায়?

— এমা

@ এমা - হ্যাঁ, আমার অন্য উত্তরটি এখানে দেখুন যা দেখায় আপনি কীভাবে ক্লাস ব্যবহার করে নিয়মটি প্রয়োগ করতে পারেন।

— বিলেণোহ

আপনি যদি কৌণিক ফর্মটিতে এটি ব্যবহার করেন তবে ফর্ম নিয়ন্ত্রণ মানটিতে মানটি আপডেট হবে না।

— আলে_ইনফো

অসাধারণ. আমি ইভেন্টটি এটিকে পরিবর্তন করেছি val প্রতিস্থাপন (/ ^ 0 + / g, '')। স্থান (/ (? <! ^) - / g, ''); এইভাবে এটি শুরুতে কেবল একটি - পরিচালনা করে এবং সংখ্যার শুরুতে 0 এর অনুমতি দেয় না।

— ব্রেন্ট

Answer 5

এবং আরও একটি উদাহরণ, যা আমার পক্ষে দুর্দান্ত কাজ করে:

function validateNumber(event) {
    var key = window.event ? event.keyCode : event.which;
    if (event.keyCode === 8 || event.keyCode === 46) {
        return true;
    } else if ( key < 48 || key > 57 ) {
        return false;
    } else {
        return true;
    }
};

কিপ্রেস ইভেন্টের সাথেও সংযুক্ত করুন

$(document).ready(function(){
    $('[id^=edit]').keypress(validateNumber);
});

এবং এইচটিএমএল:

<input type="input" id="edit1" value="0" size="5" maxlength="5" />

এখানে একটি jsFizz উদাহরণ

Comments

পেস্ট করা পাঠ্য সম্পর্কে কী?

— জেসন ইবারসি

আমি যখন এই ফাংশনটি কল করি তখন কেন আমি "ইভেন্টটি অপরিজ্ঞাপিত হয়"?

— ভিনসেন্ট

ইভেন্ট.কি কোডটি সর্বদা 0. ফিরে আসার পরে এটি ফায়ারফক্সে কাজ করবে না I আমি নতুন কোড দিয়ে ফিক্স করেছি: ফাংশন ভ্যালিডনম্বার (ইভেন্ট) {var কী = ইভেন্ট.যা || ইভেন্ট.চোড়কোড || ইভেন্ট.কি কোড || 0; যদি (কী == 8 || কী == 46 || কী == 37 || কী == 39) true সত্য প্রত্যাবর্তন; if অন্যথায় যদি (কী <48 || কী> 57) false মিথ্যা ফিরে আসে; সত্য প্রত্যাবর্তন; };

— লুয়ান এনগুইন

@ জেসিকা যেমন বলেছে, আপনি ক্যামের সাথে অ্যাডাস্ট্রোফ এবং শতাংশের চিহ্নও যুক্ত করেন।

— আলেজান্দ্রো নাভা

খুব কাছে! তবে একাধিক দশমিক ছাড়াই অনুমতি দেয়।

— ক্রস

Answer 6

এইচটিএমএল 5 রয়েছে <input type=number>যা আপনার পক্ষে ঠিক শোনাচ্ছে। বর্তমানে কেবল অপেরা এটিকে দেশীয়ভাবে সমর্থন করে তবে একটি প্রকল্প রয়েছে যার একটি জাভাস্ক্রিপ্ট বাস্তবায়ন রয়েছে।

Comments

কোন ব্রাউজার এই বৈশিষ্ট্যটি সমর্থন করে তা সংজ্ঞায়িত করার জন্য এখানে একটি দস্তাবেজ রয়েছে: caniuse.com / ইনপুট- সংখ্যা । এর লেখার হিসাবে, ক্রোম এবং সাফারি উভয়ই এই ধরণের ক্ষেত্রে সম্পূর্ণ সমর্থন করে। আইই 10 এর আংশিক সমর্থন রয়েছে এবং ফায়ারফক্সের কোনও সমর্থন নেই।

— নাথান ওয়ালেস

একমাত্র সমস্যাটি type=numberহ'ল আইই 9

— জে রড

@ জারড পুরানো আইই এর জন্য একটি পলিফিল রয়েছে' s আরও তথ্য এখানে ।

— জেকেদেব

প্রথম সমস্যাটি চরটিকে type=numberঅনুমতি দেওয়া হচ্ছে eকারণ এটি e+10সংখ্যা হিসাবে বিবেচনা করে । দ্বিতীয় সমস্যাটি হ'ল আপনি ইনপুটটিতে বর্ণের সর্বাধিক সংখ্যা সীমাবদ্ধ করতে পারবেন না।

— হাকান ফাস্টিক

আর একটি সমস্যা হ'ল টাইপটি যদি সংখ্যা হয় তবে আমি টাইপটি সেট করার সুবিধা পেতে পারি না, উদাহরণস্বরূপ: "টেলি"।

— স্কটিব্ল্যাডেস

Answer 7

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

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

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

function forceNumeric(){
    var $input = $(this);
    $input.val($input.val().replace(/[^\d]+/g,''));
}
$('body').on('propertychange input', 'input[type="number"]', forceNumeric);

Comments

jQuery 1.7+ প্রয়োজন। এটি "অনুলিপি" এর মাধ্যমে অ্যাকাউন্ট ইনপুট গ্রহণ করার কারণে এটি আরও সম্পূর্ণ উত্তর। এবং এটিও সহজ!

— মেমোচিপান

একটি বিকল্প রেজেক্স: replace(/[^\d]+/g,'')খালি স্ট্রিং সহ সমস্ত অ-অঙ্কগুলি প্রতিস্থাপন করুন। "আই" (কেস সংবেদনশীল) সংশোধক প্রয়োজন হয় না।

— মেমোচিপান

এটি শীর্ষে হওয়া উচিত, যেহেতু কোনও ট্যাগে "অনকি" ইভেন্ট হ্যান্ডলারের আর কোনও প্রচার করা উচিত নয় ...

— gpinkas

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

— আতিরাগ

@ আতিরাগ আপনি যদি দশমিক চান তবে আপনি রেজেেক্স পরিবর্তন করতে পারেন/[^\d,.]+/

— EJTH

Answer 8

আমি এখানে উল্লিখিত দুটি উত্তরের সংমিশ্রণটি বেছে নেওয়া বেছে নিয়েছি

<input type="number" />

এবং

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    return !(charCode > 31 && (charCode < 48 || charCode > 57));
}

<input type="text" onkeypress="return isNumberKey(event);">

Comments

দুর্দান্ত উত্তর ... +১। আপনি যদি বিবৃতিটি এটিকে হ্রাস করতে পারেন: return !(charCode > 31 && (charCode < 48 || charCode > 57));

— স্ক্যাডেক

কিভাবে মুছে ফেলা সম্পর্কে? আপনি সংখ্যাগুলি চান তবে আপনি সম্ভবত চান যে লোকেরা পৃষ্ঠাটি রিফ্রেশ না করে তাদের সংশোধন করতে সক্ষম হন ...

— মার্টিন এরলিক

Answer 9

এইচটিএমএল 5 রেজেক্সকে সমর্থন করে, তাই আপনি এটি ব্যবহার করতে পারেন:

<input id="numbersOnly" pattern="[0-9.]+" type="text">

সতর্কতা: কিছু ব্রাউজার এখনও এটি সমর্থন করে না।

Comments

এইচটিএমএল 5 এরও রয়েছে <input type=number>।

— ম্যাথিয়াস বাইনেস

সত্য। আপনি এটি একটি উত্তর করা উচিত। ওফস, @ এমএস 2ger এর ইতিমধ্যে রয়েছে।

— james.garriss

<ইনপুট টাইপ = সংখ্যা> নির্দিষ্ট ব্রাউজারগুলিতে বৃদ্ধি এবং হ্রাসের জন্য তীর যুক্ত করে তাই স্পিনারকে এড়াতে চাইলে এটি একটি ভাল সমাধান বলে মনে হয়

— আয়রাদ

প্যাটার্ন কেবল জমা দেওয়ার সময় চেক হয়। আপনি এখনও চিঠি লিখতে পারেন।

— এরউইন

+প্যাটার্ন বৈশিষ্ট্যের অর্থ কী ?

— প্ল্যানেট হ্যাকারস

Answer 10

জাভাস্ক্রিপ্ট

function validateNumber(evt) {
    var e = evt || window.event;
    var key = e.keyCode || e.which;

    if (!e.shiftKey && !e.altKey && !e.ctrlKey &&
    // numbers   
    key >= 48 && key <= 57 ||
    // Numeric keypad
    key >= 96 && key <= 105 ||
    // Backspace and Tab and Enter
    key == 8 || key == 9 || key == 13 ||
    // Home and End
    key == 35 || key == 36 ||
    // left and right arrows
    key == 37 || key == 39 ||
    // Del and Ins
    key == 46 || key == 45) {
        // input is VALID
    }
    else {
        // input is INVALID
        e.returnValue = false;
        if (e.preventDefault) e.preventDefault();
    }
}

অতিরিক্ত আপনি কমা, সময়কাল এবং বিয়োগ যোগ করতে পারেন (, .-)

  // comma, period and minus, . on keypad
  key == 190 || key == 188 || key == 109 || key == 110 ||

এইচটিএমএল

<input type="text" onkeydown="validateNumber(event);"/ >

Comments

কীবোর্ডগুলিতে সঠিকভাবে কাজ করে না যেখানে একটি নম্বর প্রবেশের জন্য একজনকে শিফট কী ব্যবহার করতে হবে (উদাঃ ইউরোপীয় আজার্তি কীবোর্ড)।

— ক্যাপ্টেন সংবেদনশীল

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

— real_yggdrasil

এই একমাত্র এটি কাজ করে যা অ সংখ্যাসূচক মানগুলিকে আটকাতে বাধা দেয়।

— ডেরেক LEE

Answer 11

খুবই সোজা....

// একটি জাভাস্ক্রিপ্ট ফাংশনে (এইচটিএমএল বা পিএইচপি ব্যবহার করতে পারেন)।

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

আপনার ফর্ম ইনপুট:

<input type=text name=form_number size=20 maxlength=12 onkeypress='return isNumberKey(event)'>

সর্বোচ্চ ইনপুট সহ। (এই উপরেরটি 12-সংখ্যার নম্বর দেয়)

Comments

যে না! এটি সমস্ত কিছু অবরুদ্ধ করে, নামপ্যাড, তীর কীগুলি, কী মুছে ফেলুন, শর্টকাটগুলি (উদাহরণস্বরূপ CTRL + A, CTRL + R), এমনকি ট্যাব কীটি এটি সত্যই বিরক্তিকর!

— Korri

@ Korri- কে অনুসরণ করবেন না, কী মনে হচ্ছে প্রোব্ল্যাম? এটা আমার ক্ষেত্রে ভাল কাজ করে।

— আনখার্শ

প্রথম লাইনটি অবশ্যই পরিবর্তন করতে হবে:var charCode = (evt.which) ? evt.which : evt.keyCode;

— পেইম্যান এফ।

Answer 12

2 সমাধান:

একটি ফর্ম যাচাইকারী ব্যবহার করুন (উদাহরণস্বরূপ jQuery বৈধতা প্লাগইন সহ )

নিয়মিত অভিব্যক্তি সহ ইনপুট ক্ষেত্রের অনব্লুর (অর্থাৎ ব্যবহারকারী ক্ষেত্রটি ছেড়ে যাওয়ার সময়) এর সময় একটি পরীক্ষা করুন:

<script type="text/javascript">
function testField(field) {
    var regExpr = new RegExp("^\d*\.?\d*$");
    if (!regExpr.test(field.value)) {
      // Case of error
      field.value = "";
    }
}

</script>

<input type="text" ... onblur="testField(this);"/>

Comments

মজার বিষয় হল, আমাকে "^ \\ d \\? \\ d * $" রেজেক্সটি দিতে হয়েছিল, তবে এটি হতে পারে কারণ পৃষ্ঠাটি একটি এক্সএসএলটি রূপান্তর মাধ্যমে পরিচালিত হয়েছে।

— পল টমলিন

আমি মনে করি নিয়মিত প্রকাশটি ভুল। আমি এই লাইনটি ব্যবহার করেছি:var regExpr = /^\d+(\.\d*)?$/;

— কস্টা

@ কোস্টা নিশ্চিত নন, যদি ব্যবহারকারী উদাহরণের জন্য ইনপুট করতে চান .123(পরিবর্তে 0.123)?

— রোমিন লিনসালাস

@romaintaz। আপনি ঠিক বলেছেন, তবে তারপরে আপনাকে ডলের সামনে অঙ্ক থাকবে না তা নিশ্চিত করার জন্য আপনাকে নিয়মিত ভাবটি পরিবর্তন করতে হবে। ভালো কিছু: var regExpr = /^\d+(\.\d*)?$|^\.\d+$/;।

— কস্টা

Answer 13

নিরাপদ পদ্ধতির মাধ্যমে কীপ্রেস হাইজ্যাক করা এবং কী কোডস ফিল্টার করার চেষ্টা না করে ইনপুটটির মান পরীক্ষা করা হচ্ছে।

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

নীচের স্ক্রিপ্টটি ধনাত্মক এবং negativeণাত্মক সংখ্যার অনুমতি দেয়

1
10
100.0
100.01
-1
-1.0
-10.00
1.0.0 //not allowed

var input = document.getElementById('number');
input.onkeyup = input.onchange = enforceFloat;

//enforce that only a float can be inputed
function enforceFloat() {
  var valid = /^\-?\d+\.\d*$|^\-?[\d]*$/;
  var number = /\-\d+\.\d*|\-[\d]*|[\d]+\.[\d]*|[\d]+/;
  if (!valid.test(this.value)) {
    var n = this.value.match(number);
    this.value = n ? n[0] : '';
  }
}

<input id="number" value="-3.1415" placeholder="Type a number" autofocus>

সম্পাদনা: আমি আমার পুরানো উত্তরটি সরিয়েছি কারণ আমি মনে করি এটি এখন পুরানো।

Comments

এটি প্রকৃতপক্ষে বেশিরভাগ ক্ষেত্রেই আবশ্যক বলে মনে হচ্ছে

— জিয়া উল রেহমান মোগল

Answer 14

আপনি এর জন্য প্যাটার্ন ব্যবহার করতে পারেন:

<input id="numbers" pattern="[0-9.]+" type="number">

এখানে আপনি সম্পূর্ণ মোবাইল ওয়েবসাইট ইন্টারফেস টিপস দেখতে পারেন ।

Comments

IE8 এবং 9. এ কাজ করবেন না ক্যানিউজ দেখুন । এখনও একটি ভাল উত্তর।

— aloisdg codidact.com এ চলছে

ত্রুটিটি প্রদর্শন করতে আপনি একটি শিরোনাম = "কেবল সংখ্যা" যুক্ত করতে পারেন

— থাইলিহ

Answer 15

নীচে উল্লিখিত সমাধান সন্ধান করুন। এই ব্যবহারকারী শুধুমাত্র প্রবেশ করতে সক্ষম হতে পারে numericমান, ব্যবহারকারীর করতে সক্ষম নাও হতে পারে copy, paste, dragএবং dropইনপুট হবে।

অনুমোদিত অক্ষর

0,1,2,3,4,5,6,7,8,9

ইভেন্টের মাধ্যমে চরিত্র এবং চরিত্রের অনুমতি নেই

• বর্ণানুক্রমিক মান
• বিশেষ অক্ষর
• কপি
• আটকে দিন
• টানা
• ড্রপ

$(document).ready(function() {
  $('#number').bind("cut copy paste drag drop", function(e) {
      e.preventDefault();
  });     
});
function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" class="form-control" name="number" id="number" onkeypress="return isNumberKey(event)" placeholder="Enter Numeric value only">

যদি এটি কাজ না করে তবে আমাকে জানান।

Answer 16

আপনি যদি আলফা বা সংখ্যার মধ্যে ডিভাইসটির (সম্ভবত একটি মোবাইল ফোন) পরামর্শ দিতে চান তবে আপনি ব্যবহার করতে পারেন <input type="number">।

Answer 17

আরও একটি উদাহরণ যেখানে আপনি ইনপুট ক্ষেত্রে কেবল সংখ্যা যুক্ত পারেন , অক্ষরগুলিও পারেন না

<input type="text" class="form-control" id="phone" name="phone" placeholder="PHONE" spellcheck="false" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">

Answer 18

JQuery ব্যবহার করে একটি সংক্ষিপ্ত এবং মিষ্টি বাস্তবায়ন এবং ইভেন্ট.কি কোড বা ইভেন্ট.এর পরিবর্তে () প্রতিস্থাপন করুন ich যা:

$('input.numeric').live('keyup', function(e) {
  $(this).val($(this).val().replace(/[^0-9]/g, ''));
});

কেবলমাত্র ছোট্ট পার্শ্ব প্রতিক্রিয়া যা টাইপ করা অক্ষরটি মুহূর্তের মধ্যে উপস্থিত হয় এবং সিটিআরএল / সিএমডি + এ কিছুটা অদ্ভুত আচরণ করে বলে মনে হয়।

Answer 19

input type="number" একটি HTML5 বৈশিষ্ট্য।

অন্য ক্ষেত্রে এটি আপনাকে সহায়তা করবে:

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

<input type="number" name="somecode" onkeypress="return isNumberKey(event)"/>

Comments

প্রথম লাইনটি অবশ্যই পরিবর্তন করতে হবে:var charCode = (evt.which) ? evt.which : evt.keyCode;

— পেইম্যান এফ।

Answer 20

জাভাস্ক্রিপ্ট কোড:

function validate(evt)
{
    if(evt.keyCode!=8)
    {
        var theEvent = evt || window.event;
        var key = theEvent.keyCode || theEvent.which;
        key = String.fromCharCode(key);
        var regex = /[0-9]|\./;
        if (!regex.test(key))
        {
            theEvent.returnValue = false;

            if (theEvent.preventDefault)
                theEvent.preventDefault();
            }
        }
    }

এইচটিএমএল কোড:

<input type='text' name='price' value='0' onkeypress='validate(event)'/>

পুরোপুরি কাজ করে কারণ ব্যাকস্পেস কীকোডটি 8 এবং একটি রেজেক্স এক্সপ্রেশন এটি হতে দেয় না, তাই বাগটি বাইপাস করার এটি একটি সহজ উপায় :)

Answer 21

এই সমস্যাটি সমাধানের একটি সহজ উপায় হ'ল পাঠ্যবক্সে টাইপ করা চ্যাটারগুলি উদাহরণস্বরূপ রেজেক্সের সাথে বৈধ করার জন্য একটি jQuery ফাংশন বাস্তবায়ন করছে:

আপনার এইচটিএমএল কোড:

<input class="integerInput" type="text">

এবং jsCryry ব্যবহার করে js ফাংশন করে

$(function() {
    $('.integerInput').on('input', function() {
      this.value = this.value
        .replace(/[^\d]/g, '');// numbers and decimals only

    });
});

$(function() {
        $('.integerInput').on('input', function() {
          this.value = this.value
            .replace(/[^\d]/g, '');// numbers and decimals only
            
        });
    });

<script
			  src="https://code.jquery.com/jquery-2.2.4.min.js"
			  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
			  crossorigin="anonymous">
</script>

<input type="text" class="integerInput"/>


		

Answer 22

JQuery ব্যবহার করে কেবল একটি অন্য রূপ

$(".numeric").keypress(function() {
    return (/\d/.test(String.fromCharCode(event.which) ))
});

Answer 23

এই টাইপটি এখন বেশিরভাগ ব্রাউজারগুলিতে সমর্থন করে কেবল টাইপ = "সংখ্যা" ব্যবহার করুন

<input type="number" maxlength="3" ng-bind="first">

Comments

আমি ডেটা --1(1 এর আগে 2 বিয়োগ অক্ষর) চেক করি নি ।

— এনগোক নাম

Answer 24

আপনি ইনপুট মানকে (যা ডিফল্টরূপে স্ট্রিং হিসাবে বিবেচিত হয়) নিজেই সংখ্যাসূচক হিসাবে জোর করে তুলনা করতে পারেন, যেমন:

if(event.target.value == event.target.value * 1) {
    // returns true if input value is numeric string
}

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

Answer 25

<input name="amount" type="text" value="Only number in here"/> 

<script>
    $('input[name=amount]').keyup(function(){
        $(this).val($(this).val().replace(/[^\d]/,''));
    });
</script>

Answer 26

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

if(isNaN(Number(str))) {
   // ... Exception it is NOT a number
} else {
   // ... Do something you have a number
}

আশাকরি এটা সাহায্য করবে.

Comments

আমি এটা ভালোবাসি! যেমন একটি মার্জিত সমাধান, কোন রেজেক্স জড়িত।

— লেবি রবার্টস

এটি প্রশ্নের উত্তর নয়, ওপি কেবল কোনও ইনপুটটিতে পাঠ্যকে অনুমতি দিতে বলেছিল, পরে যাচাই করে না।

— টিম্বারম্যান

হ্যাঁ, এটাই সত্য! তবে ইতিমধ্যে একটি গ্রহণযোগ্য উত্তর রয়েছে যা আমি ভাল বলে মনে করি, তবে আমি ভেবেছিলাম এটি কারওর পক্ষে সহায়তা করতে পারে, তবে এটি দুর্দান্ত এবং পরিষ্কার।

— সিচা

Answer 27

এই ডোমটি ব্যবহার করুন:

<input type = "text" onkeydown = "validate(event)"/>

এবং এই লিপি:

validate = function(evt)
{
    if ([8, 46, 37, 39, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 35, 36].indexOf(evt.keyCode || evt.which) == -1)
    {
        evt.returnValue = false;
        if(evt.preventDefault){evt.preventDefault();}
    }
}

... অথবা এই স্ক্রিপ্ট, সূচিপত্র ছাড়াই দু'টি ব্যবহার করে for...

validate = function(evt)
{
    var CharValidate = new Array("08", "046", "039", "948", "235");
    var number_pressed = false;
    for (i = 0; i < 5; i++)
    {
        for (Ncount = 0; Ncount < parseInt(CharValidate[i].substring(0, 1)) + 1; Ncount++)
        {
            if ((evt.keyCode || evt.which) == parseInt(CharValidate[i].substring(1, CharValidate[i].lenght)) + Ncount)
            {
                number_pressed = true;
            }
        }
    }
    if (number_pressed == false)
    {
        evt.returnValue = false;
        if(evt.preventDefault){evt.preventDefault();}
    }
}

আমি অ্যানকিপ্রেসের পরিবর্তে অনকিডাউন বৈশিষ্ট্যটি ব্যবহার করেছি, কারণ অনকিডাউন অ্যাট্রিবিউটটি অ্যানকিপ্রেস বৈশিষ্ট্যের আগে পরীক্ষা করা হয়েছিল checked গুগল ক্রোম ব্রাউজারে সমস্যা হবে।

"অ্যানকিপ্রেস" বৈশিষ্ট্যটি সহ, ট্যাব গুগল ক্রোমে "কন্ট্রোলডেফোল্ট" দিয়ে অনিয়ন্ত্রিত হবে, তবে, "অনকিডাউন" বৈশিষ্ট্যটি দিয়ে, ট্যাব নিয়ন্ত্রণযোগ্য হয়ে উঠবে!

ট্যাবের জন্য ASCII কোড => 9

প্রথম স্ক্রিপ্টের দ্বিতীয়টির চেয়ে কম কোড রয়েছে, তবে, ASCII অক্ষরের অ্যারেতে সমস্ত কী থাকতে হবে।

দ্বিতীয় স্ক্রিপ্টটি প্রথমটির চেয়ে অনেক বড় তবে অ্যারেগুলিতে সমস্ত কীগুলির প্রয়োজন নেই। অ্যারের প্রতিটি পজিশনে প্রথম অঙ্ক হ'ল প্রতিটি পজিশন কতবার পড়বে তা is প্রতিটি পড়ার জন্য, পরেরটিতে 1 বাড়ানো হবে। উদাহরণস্বরূপ:




এনকাউন্ট = 0

48 + এনকাউন্ট = 48

এনকাউন্ট +

48 + এনকাউন্ট = 49

এনকাউন্ট +

...

48 + এনকাউন্ট = 57




সংখ্যার কীগুলির ক্ষেত্রে কেবল 10 (0 - 9) হয় তবে এটি যদি 1 মিলিয়ন হয় তবে এই সমস্ত কী দিয়ে একটি অ্যারে তৈরি করা বুদ্ধিমান হবে না।

এএসসিআইআই কোডগুলি:

• 8 ==> (ব্যাকস্পেস);
• 46 => (মুছুন);
• 37 => (বাম তীর);
• 39 => (ডান তীর);
• 48 - 57 => (সংখ্যা);
• 36 => (বাড়ি);
• 35 => (শেষ);

Answer 28

এটি একটি উন্নত ফাংশন:

function validateNumber(evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  if ((key < 48 || key > 57) && !(key == 8 || key == 9 || key == 13 || key == 37 || key == 39 || key == 46) ){
    theEvent.returnValue = false;
    if (theEvent.preventDefault) theEvent.preventDefault();
  }
}

Answer 29

সর্বোত্তম উপায় (সমস্ত ধরণের সংখ্যার মঞ্জুরি দিন - আসল নেতিবাচক, বাস্তব ধনাত্মক, ইন্টিজার নেতিবাচক, পূর্ণসংখ্যার ধনাত্মক):

$(input).keypress(function (evt){
    var theEvent = evt || window.event;
    var key = theEvent.keyCode || theEvent.which;
    key = String.fromCharCode( key );
    var regex = /[-\d\.]/; // dowolna liczba (+- ,.) :)
    var objRegex = /^-?\d*[\.]?\d*$/;
    var val = $(evt.target).val();
    if(!regex.test(key) || !objRegex.test(val+key) || 
            !theEvent.keyCode == 46 || !theEvent.keyCode == 8) {
        theEvent.returnValue = false;
        if(theEvent.preventDefault) theEvent.preventDefault();
    };
}); 

Answer 30

এটি জিওোয়া 4 এর সমাধানের বর্ধিত সংস্করণ । সমর্থন minএবং maxবৈশিষ্ট্য। যদি সংখ্যাটি সীমার বাইরে থাকে তবে পূর্বের মানটি প্রদর্শিত হবে।

আপনি এটি এখানে পরীক্ষা করতে পারেন।

ব্যবহার: <input type=text class='number' maxlength=3 min=1 max=500>

function number(e) {
var theEvent = e || window.event;
var key = theEvent.keyCode || theEvent.which;
if(key!=13&&key!=9){//allow enter and tab
  key = String.fromCharCode( key );
  var regex = /[0-9]|\./;
  if( !regex.test(key)) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
    }   
  }
}

$(document).ready(function(){
    $("input[type=text]").filter(".number,.NUMBER").on({
        "focus":function(e){
         $(e.target).data('oldValue',$(e.target).val());
            },
        "keypress":function(e){
                e.target.oldvalue = e.target.value;
                number(e);
            },
        "change":function(e){
            var t = e.target;
            var min = $(t).attr("min");
            var max = $(t).attr("max");
            var val = parseInt($(t).val(),10);          
            if( val<min || max<val)
                {
                    alert("Error!");
                    $(t).val($(t).data('oldValue'));
                }

            }       
    });     
});

যদি ইনপুটগুলি গতিশীল হয় তবে এটি ব্যবহার করুন:

$(document).ready(function(){
    $("body").on("focus","input[type=text].number,.NUMBER",function(e){
        $(e.target).data('oldValue',$(e.target).val());
    }); 
    $("body").on("keypress","input[type=text].number,.NUMBER",function(e){
        e.target.oldvalue = e.target.value;
        number(e);
    }); 
    $("body").on("change","input[type=text].number,.NUMBER",function(e){
        var t = e.target
        var min = $(t).attr("min");
        var max = $(t).attr("max");
        var val = parseInt($(t).val());         
        if( val<min || max<val)
            {
                alert("Error!");
                $(t).val($(t).data('oldValue'));
            }
    }); 
});

Comments

@ ইউজারবি এটি কিছু মুছবে না।