jQuery: পাঠ্যবাক্সগুলির জন্য কেবলমাত্র "নম্বর" সীমাবদ্ধ করার সর্বোত্তম উপায় কী? (দশমিক পয়েন্ট অনুমতি দিন)


228

"সংখ্যা" -তে পাঠ্যবক্সের জন্য কেবল ইনপুট সীমাবদ্ধ করার সর্বোত্তম উপায় কী?

আমি এমন কিছু সন্ধান করছি যা দশমিক পয়েন্টের অনুমতি দেয়।

আমি অনেক উদাহরণ দেখতে পাচ্ছি। তবে কোনটি ব্যবহার করবেন তা সিদ্ধান্ত নিতে পারেনি।

প্রবীণ জেগনাথন থেকে আপডেট

কোনও প্লাগইন নেই, jQuery তার নিজস্ব jQuery.isNumeric()যোগ করা v1.7 এ কার্যকর করেছে । দেখুন: https://stackoverflow.com/a/20186188/66767


3
এটি একটি মতামত ভিত্তিক প্রশ্ন, তবে খুব দরকারী। মতামত ভিত্তিক প্রশ্নগুলির অনুমতি দেওয়া উচিত। যে ব্যক্তি এই তথ্যটি সন্ধান করছে তাকে কেবল সচেতন হওয়া দরকার যে এটি কেবল একটি মতামত ভিত্তিক উত্তর। একটি ট্যাগ যথেষ্ট হবে।
থিয়াগো সি এস ভেন্তুরা

এখানে লাইভ ডেমো কোডিপিডিয়া.info
সিংহ

উত্তর:


198

হালনাগাদ

এর জন্য একটি নতুন এবং খুব সাধারণ সমাধান রয়েছে:

এটি আপনাকে বিভিন্ন সংখ্যার ফিল্টার সহ কোনও পাঠ্যে যে কোনও ধরণের ইনপুট ফিল্টার ব্যবহার করতে দেয় <input>। এটি অনুলিপি + আটকান, টেনে আনুন + ড্রপ, কীবোর্ড শর্টকাটগুলি, প্রসঙ্গ মেনু অপারেশনগুলি, টাইপযোগ্য নয় কী এবং সমস্ত কীবোর্ড বিন্যাস সঠিকভাবে পরিচালনা করবে।

এই উত্তরটি দেখুন বা এটি নিজে জেএসফিডেলে চেষ্টা করুন

jquery.numeric প্লাগইন

আমি jquery.numeric প্লাগইন সহ সফলভাবে অনেক ফর্ম প্রয়োগ করেছি ।

$(document).ready(function(){
    $(".numeric").numeric();
});

তাছাড়া এটি টেক্সারিয়াসের সাথেও কাজ করে!

তবে লক্ষ করুন যে সিটিআরএল + এ, অনুলিপি + আটকানো (প্রসঙ্গ মেনুর মাধ্যমে) এবং ড্রাগ + ড্রপ প্রত্যাশার মতো কাজ করবে না

এইচটিএমএল 5

এইচটিএমএল 5 স্ট্যান্ডার্ডের জন্য আরও বিস্তৃত সমর্থন সহ, আমরা কেবলমাত্র সংখ্যার ইনপুটকে সীমাবদ্ধ করতে উপাদানগুলির জন্য patternঅ্যাট্রিবিউট এবং numberটাইপ করতে পারি input। কিছু ব্রাউজারে (উল্লেখযোগ্যভাবে গুগল ক্রোম) এটি অ-সংখ্যাসূচক বিষয়বস্তু আটকানোও সীমাবদ্ধ করতে কাজ করে। সম্পর্কে আরও তথ্য numberএবং অন্যান্য নতুন ইনপুট ধরনের পাওয়া যায় এখানে


5
এই প্লাগইনটি আপনাকে অপেরাতে ব্যাকস্পেস ব্যবহার করতে দেয় না।
ড্যারিল হেইন

6
@ ড্যারিল উত্সটি কয়েক ডজন লাইন দীর্ঘ, সুতরাং আমি নিশ্চিত যে এটিকে তুচ্ছ হিসাবে চিহ্নিত করার জন্য এটি পরিবর্তন করা হয়েছে। আমি এই প্লাগইনটি সবেমাত্র খুঁজে পেয়েছি এবং এটির সংশোধন করেছি যাতে allowDecimalযখনই কেবলমাত্র পূর্ণসংখ্যার মানগুলিকে অনুমতি দিতে চাই তখন সেখানে একটি বিকল্প রয়েছে .. উত্সটি খুব সহজ এবং ভাল লেখা।
আর্লজ

1
যেগুলি ইনপুট ক্ষেত্রগুলিতে কপি-পেস্ট করার সময় এটি কাজ করে না type="number"
টালমারিস

@ টালমারিস এটি সত্যই খুব পুরানো প্রশ্নোত্তর। এইচটিএমএলে অনেকগুলি পরিবর্তন হয়েছে এবং এটি বিবেচনা করা উচিত।
TheVilageIdiot

হাই @TheVilageIdiot, আপনি ঠিক বলেছেন। আমি মন্তব্যে অভদ্র শব্দটি শুনতে চাইনি (যা সম্ভবত কিছুটা শুকনো) :) সত্যটি হ'ল আমি সাম্প্রতিক কিছু মন্তব্য দেখেছি, তাই আমি কেবল পরিষ্কার করতে চেয়েছিলাম যে এই মুহূর্তে, এটির জন্য সেরা সমাধান নয় probably সমস্যা।
টালমারিস

288

আপনি যদি ইনপুটকে সীমাবদ্ধ করতে চান (বৈধতার বিপরীতে), আপনি মূল ইভেন্টগুলি নিয়ে কাজ করতে পারেন। এটার মতো কিছু:

<input type="text" class="numbersOnly" value="" />

এবং:

jQuery('.numbersOnly').keyup(function () { 
    this.value = this.value.replace(/[^0-9\.]/g,'');
});

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

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


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

সম্মত হয়। tarbuilders.com এ আমার একটি উদাহরণ রয়েছে । আপনি যদি "পরিচিতি" ক্লিক করেন, ফর্মটি উড়ানের ব্যবহারকারীর ইনপুটটি পরীক্ষা করে এবং যদি এটি বৈধ হয় তবে সবুজ বর্ডার এবং চেক চিহ্ন রয়েছে। অবৈধ -> লাল এবং "এক্স"
কিথ বেনট্রুপ

5
তীর কী সমস্যাটি ঠিক করতে এই উত্তরটি দেখুন ।
হান্না

দয়া করে মনে রাখবেন আপনি ডান মাউস বোতামের সাহায্যে অক্ষর এবং অক্ষরগুলি পেস্ট করতে পারেন> পেস্ট করুন। $doc.on('keyup blur input propertychange', 'input[name="price"]', function(){$(this).val($(this).val().replace(/[^0-9\.]/g,''));});
এটির

1
ক্র্যাপ, যদি আমি সংখ্যাগুলি লিখি যেমন "123", এবং তারপরে একটি চিঠি কী টিপুন, "" একটি "এটি ইনপুট খালি করে ...
ক্যান্ডেলজ্যাক

102

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

jQuery('.numbersOnly').keyup(function () {  
    this.value = this.value.replace(/[^0-9\.]/g,''); 
});

তবে আমি সম্মত হই যে স্ট্রিংয়ের শেষে তীর কী এবং মুছে ফেলা বোতাম স্ন্যাপ কার্সারটি কিছুটা ব্যথা হয় (এবং এটি পরীক্ষায় আমার পিছনে লাথি মেরেছিল)

আমি একটি সাধারণ পরিবর্তন যোগ

$('.numbersOnly').keyup(function () {
    if (this.value != this.value.replace(/[^0-9\.]/g, '')) {
       this.value = this.value.replace(/[^0-9\.]/g, '');
    }
});

এইভাবে যদি এমন কোনও বাটন হিট হয় যা পাঠ্যটি পরিবর্তিত হতে না পারে কেবল এটিকে উপেক্ষা করুন। এটির সাহায্যে আপনি তীরগুলি আঘাত করতে পারেন এবং শেষ পর্যন্ত না লাফিয়ে মুছতে পারেন তবে এটি কোনও অ-সংখ্যাযুক্ত পাঠ্য পরিষ্কার করে।


27
আরও ভাল পারফরম্যান্সের জন্য দুবার চালানোর পরিবর্তে প্রতিস্থাপনের ফলাফল সহ একটি ভেরি তৈরি করুন।
ড্রাইভারডান

4
keypressএটি আরও সরল করার জন্য ব্যবহার করা যেতে পারে, কারণ যে কোনও কীবোর্ড কীটি আপাতদৃষ্টিতে keyupএবং keydownট্রিগার করে, যেখানে keypress কেবল "চরিত্র" কীগুলিতে ট্রিগার হয় (এইভাবে তীরটিতে ট্রিগার এবং কীগুলি মুছে ফেলা হয় না )। রেফারেন্সের জন্য এই উত্তরটি দেখুন: stackoverflow.com/a/1367720/1298685
ইয়ান ক্যাম্পবেল

এটি এক দশমিক একের বেশি গ্রহণ করছে। কিভাবে একটি মাত্র দশমিক গ্রহণ। আমি পরিমাণ পাঠ্য ক্ষেত্রে আবেদন করেছি। এটিও নিচ্ছে 12.5.6। কিভাবে একটি পয়েন্ট জন্য সীমাবদ্ধ।
নিরু দ্যোগি

@ আইয়ান ক্যাম্পবেল কী-টিপস মানে আপনি যে অক্ষরটি সরাতে পারবেন না তা শুরু করতে কোনও অক্ষর ইনপুট করতে পারেন। কাজ হবে না। কীডাউন একই কাজ করে। আমি এটি কেবল কীআপ দিয়ে কাজ করতে পারি।
নিকডনক

54

Jquery.numeric প্লাগইনে কিছু বাগ রয়েছে যা আমি লেখককে অবহিত করেছি। এটি সাফারি এবং অপেরাতে একাধিক দশমিক পয়েন্টের অনুমতি দেয় এবং আপনি ব্যাকস্পেস, তীর কী বা অপেরাতে বেশ কয়েকটি নিয়ন্ত্রণের অক্ষর টাইপ করতে পারবেন না। আমার ইতিবাচক পূর্ণসংখ্যার ইনপুট দরকার তাই আমি শেষ পর্যন্ত নিজের লেখাটি শেষ করলাম।

$(".numeric").keypress(function(event) {
  // Backspace, tab, enter, end, home, left, right
  // We don't support the del key in Opera because del == . == 46.
  var controlKeys = [8, 9, 13, 35, 36, 37, 39];
  // IE doesn't support indexOf
  var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
  // Some browsers just don't raise events for control keys. Easy.
  // e.g. Safari backspace.
  if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
      (49 <= event.which && event.which <= 57) || // Always 1 through 9
      (48 == event.which && $(this).attr("value")) || // No 0 first digit
      isControlKey) { // Opera assigns values for control keys.
    return;
  } else {
    event.preventDefault();
  }
});

এই কোডটি ব্যবহার করে মোটেও 0 টি প্রবেশ করা সম্ভব নয়। ম্যাকে ক্রোম এবং এফএফ দিয়ে পরীক্ষিত।
jaredstenquist

1
আমি 0 টি সংখ্যার (48 == ইভেন্টটি.ওহ & অ্যান্ড (((এটি)। ওভেল ()> 0)) গ্রহণ করার জন্য এটি আপডেট করেছি || // না 0 প্রথম অঙ্ক
aljordan82

এটি একটি দুর্দান্ত সমাধান তবে এটি দশমিকগুলি অনুপস্থিত, কেবল যুক্ত করুন (46 == ইভেন্ট.ও যা &&! (This (এটি)। ওভাল ()। অন্তর্ভুক্ত ("।"))) ||
ডায়মন্ডড্রাক

মোটেও 0 টাইপ করতে পারবেন না।
পিজে 7

47

কোনও প্লাগইন নেই, jQuery তার নিজস্ব jQuery.isNumeric () v1.7 এ যুক্ত করেছে।

jQuery.isNumeric( value )

এটির যুক্তিটি আনবার কিনা তা নির্ধারণ করে।

নমুনা ফলাফল

$.isNumeric( "-10" );     // true
$.isNumeric( 16 );        // true
$.isNumeric( 0xFF );      // true
$.isNumeric( "0xFF" );    // true
$.isNumeric( "8e5" );     // true (exponential notation string)
$.isNumeric( 3.1415 );    // true
$.isNumeric( +10 );       // true
$.isNumeric( 0144 );      // true (octal integer literal)
$.isNumeric( "" );        // false
$.isNumeric({});          // false (empty object)
$.isNumeric( NaN );       // false
$.isNumeric( null );      // false
$.isNumeric( true );      // false
$.isNumeric( Infinity );  // false
$.isNumeric( undefined ); // false

ইভেন্ট শ্রোতার সাথে কীভাবে ইসনুমিক () যুক্ত করা যায় তার উদাহরণ এখানে

$(document).on('keyup', '.numeric-only', function(event) {
   var v = this.value;
   if($.isNumeric(v) === false) {
        //chop off the last char entered
        this.value = this.value.slice(0,-1);
   }
});

প্লাগইনগুলির জন্য +1। হাজার হাজার সেপারেটরকে অনুমতি দেওয়ার জন্য আমি সামান্য পরিবর্তন যুক্ত করতে চাই। পরিবর্তে var v = this.value;এটি পরিবর্তন var v = this.value.replace(/,/g,'');। যেমন 21,345,67.800সংখ্যা খুব বিবেচনা করা হয়।
maan81

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

2
এটি খুব কাছাকাছি। তবে, আপনি যদি একটি অক্ষর কী ধরে রাখেন তবে এটি চেকটি সঠিকভাবে চালায় না। চরিত্রটি "চলবে"। পরিবর্তে এটি চেষ্টা করুন: $(document).on('keyup keypress', '#somethingSomething', function(){ var aValue = $(this).val(); if($.isNumeric(aValue) === false){ $(this).val(aValue.slice(0,-1)); } });
Gwi7d31

34

উপরে উল্লিখিত সংখ্যাসূচক () প্লাগইন অপেরাতে কাজ করে না (আপনি ব্যাকস্পেস করতে পারবেন না, মুছতে বা এমনকি পিছনে বা ফরোয়ার্ড কীগুলিও ব্যবহার করতে পারবেন না)।

JQuery বা জাভাস্ক্রিপ্ট উভয়েরই নীচের কোডটি পুরোপুরি কাজ করবে (এবং এটি কেবল দুটি লাইন)।

jQuery:

$(document).ready(function() {
    $('.key-numeric').keypress(function(e) {
            var verified = (e.which == 8 || e.which == undefined || e.which == 0) ? null : String.fromCharCode(e.which).match(/[^0-9]/);
            if (verified) {e.preventDefault();}
    });
});

javascript:

function isNumeric(e)
{
    var keynum = (!window.event) ? e.which : e.keyCode;
    return !((keynum == 8 || keynum == undefined || e.which == 0) ? null : String.fromCharCode(keynum).match(/[^0-9]/));
}

অবশ্যই এটি খাঁটি অঙ্কের ইনপুট (প্লাস ব্যাকস্পেস, ডিলিট, ফরোয়ার্ড / ব্যাক কী) কেবল তবে পয়েন্ট এবং বিয়োগ অক্ষর অন্তর্ভুক্ত করার জন্য সহজেই পরিবর্তন করা যেতে পারে।


নামপ্যাডেরও অনুমতি নেই
গ্রাহাম


18

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

এটি বৈধ ইন্টি গ্রহণ করে এবং উভয় মান ভাসিয়ে দেয়।

জাভাস্ক্রিপ্ট পদ্ধতির

onload =function(){ 
  var ele = document.querySelectorAll('.number-only')[0];
  ele.onkeypress = function(e) {
     if(isNaN(this.value+""+String.fromCharCode(e.charCode)))
        return false;
  }
  ele.onpaste = function(e){
     e.preventDefault();
  }
}
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

jQuery পদ্ধতির

$(function(){

  $('.number-only').keypress(function(e) {
	if(isNaN(this.value+""+String.fromCharCode(e.charCode))) return false;
  })
  .on("cut copy paste",function(e){
	e.preventDefault();
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

হালনাগাদ

উপরের উত্তরগুলি সর্বাধিক সাধারণ ব্যবহারের ক্ষেত্রে - একটি সংখ্যা হিসাবে ইনপুট বৈধকরণ।

তবে নীচে বিশেষ ব্যবহারের ক্ষেত্রে কোড স্নিপেট রয়েছে

  • নেতিবাচক সংখ্যা অনুমতি দেওয়া হচ্ছে
  • এটি অপসারণের আগে অবৈধ কীস্ট্রোকটি দেখানো হচ্ছে।

$(function(){
      
  $('.number-only').keyup(function(e) {
        if(this.value!='-')
          while(isNaN(this.value))
            this.value = this.value.split('').reverse().join('').replace(/[\D]/i,'')
                                   .split('').reverse().join('');
    })
    .on("cut copy paste",function(e){
    	e.preventDefault();
    });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />


14

আক্ষরিকভাবে কীস্ট্রোকগুলি ব্লক করতে আমি যা ব্যবহার করি তা নীচে। এটি কেবল 0-9 সংখ্যা এবং দশমিক পয়েন্টের অনুমতি দেয়। কার্যকর করা সহজ, প্রচুর কোড নয়, এবং কবজির মতো কাজ করে:

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

<input value="" onkeypress="return isNumberKey(event)">

যদি কেউ ভাবছেন- আপনি charCode != 46যদি বিবৃতি থেকে সরিয়ে দশমিকাকে সীমাবদ্ধ করতে পারেন । দুর্দান্ত উত্তর!
গা

ঠিক ঠিক, আমি দশমিক এড়াতে চারকোড! = 46 সরিয়েছি removed ধন্যবাদ ক্যালিয়াজি, এই উত্তরটি আমার পক্ষে দুর্দান্ত কাজ করেছে।
মিসকার

3
এটি একটি খারাপ সমাধান কারণ এটি ব্যাকস্পেস, তীর, নিয়ন্ত্রণ কী এবং অন্যান্য প্রয়োজনীয় কীস্ট্রোকগুলিকে অ্যাকাউন্টে নেয় না।
ড্রাইভারডান

আমি সবেমাত্র একটি সমাধান পোস্ট করেছি যা এর অনুরূপ, তবে ব্যাকস্পেস, তীরগুলিও পরিচালনা করে এবং কোনও হার্ড-কোডেড কী কোড ব্যবহার করে না। এটি এখানে দেখুন: স্ট্যাকওভারফ্লো.com
23468513

11

এই পরামর্শের সামান্য উন্নতি হিসাবে , আপনি এর নম্বর () , সংখ্যা এবং ব্যাপ্তি পদ্ধতি সহ বৈধতা প্লাগইন ব্যবহার করতে পারেন । উদাহরণস্বরূপ, নিম্নলিখিতটি আপনাকে 0 এবং 50 এর মধ্যে ধনাত্মক পূর্ণসংখ্যার নিশ্চয়তা দেয়:

$("#myform").validate({
  rules: {
    field: {
      required: true,
      number: true,
      digits: true,
      range : [0, 50]
    }
  }
});

9

আপনি বর্ণমালাগুলির magন্দ্রজালিক চেহারা এবং নীচে কীভাবে অন্তর্ধান দেখতে পাচ্ছেন না। এটি মাউস পেস্টেও কাজ করে।

$('#txtInt').bind('input propertychange', function () {
    $(this).val($(this).val().replace(/[^0-9]/g, ''));
});

দশমিকের অনুমতি না দিলেও, আমি এটি পূর্ণসংখ্যার জন্য সবচেয়ে সহজ পদ্ধতি বলে মনে করেছি।
নিকডনক

দশমিকের জন্য, আপনি সম্ভবত রেজিটাকে এমন কিছুতে আপডেট করতে পারেন/[^0-9.]/g
নুল হেড

আমার দশমিকের দরকার নেই এটি কেবল ওপি করেছে বলেই হয়েছিল, তবে হ্যাঁ :)
নিকডনক

8

আমি প্রথমে jQuery ব্যবহার করে এটি সমাধান করার চেষ্টা করেছি, তবে কীআপে অপসারণের ঠিক আগে ইনপুট ক্ষেত্রে প্রকৃতপক্ষে অবাঞ্ছিত চরিত্রগুলি (অ-অঙ্কগুলি) নিয়ে আমি খুশি ছিলাম না।

অন্যান্য সমাধানের সন্ধানে আমি এটি পেয়েছি:

পূর্ণসংখ্যা (অ-নেতিবাচক)

<script>
  function numbersOnly(oToCheckField, oKeyEvent) {
    return oKeyEvent.charCode === 0 ||
        /\d/.test(String.fromCharCode(oKeyEvent.charCode));
  }
</script>

<form name="myForm">
<p>Enter numbers only: <input type="text" name="myInput" 
    onkeypress="return numbersOnly(this, event);" 
    onpaste="return false;" /></p>
</form>

উত্স: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onkeypress# উদাহরণ লাইভ উদাহরণ: http://jsfiddle.net/u8sZq/

দশমিক পয়েন্ট (অ-নেতিবাচক)

একক দশমিক বিন্দুর অনুমতি দেওয়ার জন্য আপনি এরকম কিছু করতে পারেন:

<script>
  function numbersOnly(oToCheckField, oKeyEvent) {        
    var s = String.fromCharCode(oKeyEvent.charCode);
    var containsDecimalPoint = /\./.test(oToCheckField.value);
    return oKeyEvent.charCode === 0 || /\d/.test(s) || 
        /\./.test(s) && !containsDecimalPoint;
  }
</script>

সূত্র: সবেমাত্র এটি লিখেছেন। কাজ করছে বলে মনে হচ্ছে। সরাসরি উদাহরণ: http://jsfiddle.net/tjBsF/

অন্যান্য কাস্টমাইজেশন

  • আরও প্রতীক টাইপ করার অনুমতি দিতে কেবল নিয়মিত অভিব্যক্তিগুলিতে এটি যুক্ত করুন যা বেসিক চর কোড ফিল্টার হিসাবে কাজ করে।
  • সাধারণ প্রাসঙ্গিক বিধিনিষেধ প্রয়োগ করতে, ইনপুট ক্ষেত্রের বর্তমান সামগ্রী (রাষ্ট্র) দেখুন (oToCheckField.value)

আপনার আগ্রহী হতে পারে এমন কিছু জিনিস:

  • শুধুমাত্র একটি দশমিক পয়েন্ট অনুমোদিত
  • স্ট্রিংয়ের শুরুতে অবস্থান থাকলেই বিয়োগ চিহ্নটি মঞ্জুরি দিন। এটি নেতিবাচক সংখ্যার জন্য অনুমতি দেবে।

ভুলত্রুটি

  • ক্যারেটের অবস্থানটি ফাংশনের অভ্যন্তরে উপলব্ধ নয়। এটি প্রাসঙ্গিক বিধিনিষেধকে ব্যাপকভাবে হ্রাস করেছে যা আপনি প্রয়োগ করতে পারেন (উদাহরণস্বরূপ, কোনও দুটি সমপর্যায়ের প্রতীক)। এটি অ্যাক্সেস করার সর্বোত্তম উপায় কী তা নিশ্চিত নয়।

আমি জানি শিরোনামটি jQuery সমাধানগুলির জন্য জিজ্ঞাসা করে, তবে আশা করি যে কোনওভাবেই এটি দরকারী হয়ে উঠবে।


6

ডেভ অ্যারন স্মিথ পোস্টের জন্য ধন্যবাদ

সংখ্যা বিভাগ থেকে দশমিক পয়েন্ট এবং সংখ্যা গ্রহণ করতে আমি আপনার উত্তর সম্পাদনা করেছি। এই কাজটি আমার পক্ষে নিখুঁত।

$(".numeric").keypress(function(event) {
  // Backspace, tab, enter, end, home, left, right,decimal(.)in number part, decimal(.) in alphabet
  // We don't support the del key in Opera because del == . == 46.
  var controlKeys = [8, 9, 13, 35, 36, 37, 39,110,190];
  // IE doesn't support indexOf
  var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
  // Some browsers just don't raise events for control keys. Easy.
  // e.g. Safari backspace.
  if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
      (49 <= event.which && event.which <= 57) || // Always 1 through 9
      (96 <= event.which && event.which <= 106) || // Always 1 through 9 from number section 
      (48 == event.which && $(this).attr("value")) || // No 0 first digit
      (96 == event.which && $(this).attr("value")) || // No 0 first digit from number section
      isControlKey) { // Opera assigns values for control keys.
    return;
  } else {
    event.preventDefault();
  }
});

6
   window.jQuery.fn.ForceNumericOnly =
       function () {

           return this.each(function () {
               $(this).keydown(function (event) {
                   // Allow: backspace, delete, tab, escape, and enter
                   if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
                       // Allow: Ctrl+A
                       (event.keyCode == 65 && event.ctrlKey === true) ||
                       // Allow: home, end, left, right
                       (event.keyCode >= 35 && event.keyCode <= 39)) {
                       // let it happen, don't do anything
                       return;
                   } else {
                       // Ensure that it is a number and stop the keypress
                       if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
                           event.preventDefault();
                       }
                   }
               });
           });
       };

এবং আপনার যে সমস্ত ইনপুট চান তা প্রয়োগ করুন:

$('selector').ForceNumericOnly();

5

এইচটিএমএল 5 অক্টোবরের হিসাবে CanIUse অনুযায়ী গ্লোবাল ব্রাউজার সমর্থন 88% + সহ ইনপুট ধরণের সংখ্যা সমর্থন করে।

<input type="number" step="0.01" min="0" name="askedPrice" id="askedPrice" />

এটি জিকিউরি সম্পর্কিত সমাধান নয়, তবে সুবিধাটি হ'ল মোবাইল ফোনে অ্যান্ড্রয়েড কীবোর্ড নম্বর প্রবেশের জন্য অনুকূলিত করা হবে।

বিকল্পভাবে, নতুন পরামিতি "প্যাটার্ন" দিয়ে ইনপুট ধরণের পাঠ্য ব্যবহার করা সম্ভব। এইচটিএমএল 5 বিশেষে আরও বিশদ।

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

জেএসফিডাল: https://jsfiddle.net/p1ue8qxj/


4

এই ফাংশনটি একই কাজ করে, উপরের কিছু ধারণা ব্যবহার করে।

$field.keyup(function(){
    var val = $j(this).val();
    if(isNaN(val)){
         val = val.replace(/[^0-9\.]/g,'');
         if(val.split('.').length>2) val =val.replace(/\.+$/,"");
    }
    $j(this).val(val); 
});
  • চাক্ষুষ প্রতিক্রিয়া দেখান (অদৃশ্য হওয়ার আগে ভুল চিঠি উপস্থিত হয়)
  • দশমিকের অনুমতি দেয়
  • একাধিক "
  • বাম / ডান ডেল ইত্যাদি নিয়ে কোনও সমস্যা নেই

4

/ * এটি আমার ক্রস ব্রাউজার সংস্করণ কীভাবে এইচটিএমএল ইনপুটবক্সে jQuery ব্যবহার করে কেবল সংখ্যাসূচক (0-9) কে অনুমতি দেবেন?
* /

$("#inputPrice").keydown(function(e){
    var keyPressed;
    if (!e) var e = window.event;
    if (e.keyCode) keyPressed = e.keyCode;
    else if (e.which) keyPressed = e.which;
    var hasDecimalPoint = (($(this).val().split('.').length-1)>0);
    if ( keyPressed == 46 || keyPressed == 8 ||((keyPressed == 190||keyPressed == 110)&&(!hasDecimalPoint && !e.shiftKey)) || keyPressed == 9 || keyPressed == 27 || keyPressed == 13 ||
             // Allow: Ctrl+A
            (keyPressed == 65 && e.ctrlKey === true) ||
             // Allow: home, end, left, right
            (keyPressed >= 35 && keyPressed <= 39)) {
                 // let it happen, don't do anything
                 return;
        }
        else {
            // Ensure that it is a number and stop the keypress
            if (e.shiftKey || (keyPressed < 48 || keyPressed > 57) && (keyPressed < 96 || keyPressed > 105 )) {
                e.preventDefault();
            }
        }

  });


3

আপনি ডেকোরপ্ল্যানেট ডটকম থেকে স্বয়ংক্রিয় সংখ্যক ব্যবহার করতে পারেন । সংখ্যার পাশাপাশি মুদ্রা, বৃত্তাকার ইত্যাদির জন্য তাদের দুর্দান্ত সমর্থন রয়েছে have

আমি কয়েকটি সিএসএস টুইট সহ একটি আই 6 পরিবেশে ব্যবহার করেছি এবং এটি একটি যুক্তিসঙ্গত সাফল্য ছিল।

উদাহরণস্বরূপ, একটি CSS ক্লাস numericInputসংজ্ঞায়িত করা যেতে পারে, এবং এটি আপনার ক্ষেত্রগুলিকে সংখ্যার ইনপুট মাস্কগুলি সাজাতে ব্যবহার করা যেতে পারে।

স্বতঃসংখ্যক ওয়েবসাইট থেকে অভিযোজিত:

$('input.numericInput').autoNumeric({aSep: '.', aDec: ','}); // very flexible!

স্বতঃসংখ্যক অবশ্যই যাওয়ার উপায়
প্রেথেন

3

আমি মনে করি এটি এই সমস্যা সমাধানের একটি ভাল উপায় এবং এটি অত্যন্ত সহজ:

$(function() {
    var pastValue, pastSelectionStart, pastSelectionEnd;

    $("input").on("keydown", function() {
        pastValue          = this.value;
        pastSelectionStart = this.selectionStart;
        pastSelectionEnd   = this.selectionEnd;
    }).on("input propertychange", function() {
        var regex = /^[0-9]+\.?[0-9]*$/;

        if (this.value.length > 0 && !regex.test(this.value)) {
            this.value          = pastValue;
            this.selectionStart = pastSelectionStart;
            this.selectionEnd   = pastSelectionEnd;
        }
    });
});

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

দৃশ্যাবলী coveredাকা

এখানে সর্বাধিক অনুরূপ সুপারিশগুলি এর মধ্যে কমপক্ষে একটিতে ব্যর্থ হয় বা এই সমস্ত পরিস্থিতিতে coverাকতে প্রচুর কোডের প্রয়োজন হয়।

  1. শুধুমাত্র 1 দশমিক পয়েন্টের অনুমতি দেয়।
  2. অনুমতি দেয় home, endএবং arrowকীগুলি।
  3. মঞ্জুরি দেয় deleteএবং backspaceযে কোনও সূচীতে ব্যবহার করা যায়।
  4. যে কোনও সূচীতে সম্পাদনা করার অনুমতি দেয় (যতক্ষণ না ইনপুটটি রেজেক্সের সাথে মেলে)।
  5. বৈধ ইনপুট (ডান ক্লিক + পেস্টের সাথে একই) এর জন্য সিআরটিএল + ভি এবং শিফট + প্রবেশের অনুমতি দেয়।
  6. keyupইভেন্টটি ব্যবহৃত না হওয়ায় পাঠ্যের মানটি ঝাঁকুনি দেয় না।
  7. অবৈধ ইনপুট পরে নির্বাচন পুনরুদ্ধার।

পরিস্থিতি ব্যর্থ

  • শুরু করে 0.5এবং কেবল শূন্য মুছে ফেলা কাজ করবে না। পাঠ্যবক্সটি যখন দশমিক বিন্দু (যখন ইচ্ছা হয়) দিয়ে শুরু হয় তখন এটিকে রেজেক্সে পরিবর্তন করে /^[0-9]*\.?[0-9]*$/এবং তারপরে একটি ব্লেন্ড ইভেন্ট যুক্ত করে স্থির করা যায় 0। এটি কীভাবে ঠিক করা যায় তার আরও ভাল ধারণার জন্য এই উন্নত দৃশ্যটি দেখুন ।

প্লাগ লাগানো

এটিকে আরও সহজ করার জন্য আমি এই সাধারণ jquery প্লাগইনটি তৈরি করেছি:

$("input").limitRegex(/^[0-9]+\.?[0-9]*$/);

2

সর্বোত্তম উপায় হ'ল পাঠ্য বাক্সের কনটেক্সটগুলি পরীক্ষা করা যখনই ফোকাস হারিয়ে ফেলে।

নিয়মিত এক্সপ্রেশন ব্যবহার করে সামগ্রীগুলি একটি "সংখ্যা" কিনা তা আপনি পরীক্ষা করতে পারেন can

অথবা আপনি বৈধতা প্লাগইন ব্যবহার করতে পারেন, যা মূলত এটি স্বয়ংক্রিয়ভাবে এটি করে।


নিয়মিত প্রকাশটি হবে /^\d*\.{0,1}\d+$/
চেতন এস

2

ডাটাবেস ব্যবহারের জন্য এই সন্ধানের কোডটি পরীক্ষা করুন:

function numonly(root){
    >>var reet = root.value;
    var arr1 = reet.length;
    var ruut = reet.charAt(arr1-1);
    >>>if (reet.length > 0){
        var regex = /[0-9]|\./;
        if (!ruut.match(regex)){
            var reet = reet.slice(0, -1);
            $(root).val(reet);
        >>>>}
    }
}
//Then use the even handler onkeyup='numonly(this)'

2

পাঠ্যক্ষেত্রের পূর্ণসংখ্যার শতাংশের বৈধতার জন্য আমি (পিটার মর্টেনসেন / কিথ বেন্ট্রপের কোডের একটি অংশ ব্যবহার করে) স্নিপেটটি করেছি (jQuery প্রয়োজন):

/* This validates that the value of the text box corresponds
 * to a percentage expressed as an integer between 1 and 100,
 * otherwise adjust the text box value for this condition is met. */
$("[id*='percent_textfield']").keyup(function(e){
    if (!isNaN(parseInt(this.value,10))) {
        this.value = parseInt(this.value);
    } else {
        this.value = 0;
    }
    this.value = this.value.replace(/[^0-9]/g, '');
    if (parseInt(this.value,10) > 100) {
        this.value = 100;
        return;
    }
});

এই কোড:

  • প্রধান সংখ্যাসূচক কী এবং সংখ্যাযুক্ত কীপ্যাড ব্যবহার করার অনুমতি দেয়।
  • শিফট-সংখ্যাযুক্ত অক্ষর বাদ দেওয়ার জন্য বৈধতা (যেমন #, $,%, ইত্যাদি)
  • 0 দ্বারা NaN মানগুলি প্রতিস্থাপন করে
  • 100 এর চেয়ে বেশি 100 মান দ্বারা প্রতিস্থাপিত হয়

আমি আশা করি এটি অভাবীদের সহায়তা করে helps



2

আপনি যদি এইচটিএমএল 5 ব্যবহার করছেন তবে আপনাকে বৈধতা দেওয়ার জন্য কোনও বড় দৈর্ঘ্যে যেতে হবে না। শুধু ব্যবহার করুন -

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

পদক্ষেপের বৈশিষ্ট্য দশমিক পয়েন্টটি বৈধ হতে দেয়।


2
তাই নয়, ফায়ারফক্স এবং অপেরা অ-সংখ্যাযুক্ত পাঠ্য ইনপুটটির অনুমতি দেয়
মাইকেল জ্বর

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

2

ইনপুটটিতে ক্যারেটের অবস্থান রাখার অন্য উপায়:

$(document).ready(function() {
  $('.numbersOnly').on('input', function() {
    var position = this.selectionStart - 1;

    fixed = this.value.replace(/[^0-9\.]/g, '');  //remove all but number and .
    if(fixed.charAt(0) === '.')                  //can't start with .
      fixed = fixed.slice(1);

    var pos = fixed.indexOf(".") + 1;
    if(pos >= 0)
      fixed = fixed.substr(0,pos) + fixed.slice(pos).replace('.', '');  //avoid more than one .

    if (this.value !== fixed) {
      this.value = fixed;
      this.selectionStart = position;
      this.selectionEnd = position;
    }
  });
});

সুবিধাদি:

  1. ব্যবহারকারী তীর কীগুলি, ব্যাকস্পেস, মুছুন, ...
  2. আপনি সংখ্যা পেস্ট করতে চান যখন কাজ করে

প্লাঙ্কার: ডেমো কাজ করছে


1

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

এটি দুর্দান্ত কাজ করে!

এটি http://itgroup.com.ph/lphanumeric/ এ দেখুন


1
    $(".numeric").keypress(function(event) {
  // Backspace, tab, enter, end, home, left, right
  // We don't support the del key in Opera because del == . == 46.
  var controlKeys = [8, 9, 13, 35, 36, 37, 39];
  // IE doesn't support indexOf
  var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
  // Some browsers just don't raise events for control keys. Easy.
  // e.g. Safari backspace.
  if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
      (49 <= event.which && event.which <= 57) || // Always 1 through 9
      (48 == event.which && $(this).attr("value")) || // No 0 first digit
      isControlKey) { // Opera assigns values for control keys.
    return;
  } else {
    event.preventDefault();
  }
});

এই কোডটি আমার পক্ষে বেশ ভাল কাজ করেছে, পিরিয়ডটি ব্যবহার করার জন্য আমাকে কন্ট্রোলকি অ্যারেতে কেবল 46 টি যুক্ত করতে হয়েছিল, যদিও আমি মনে করি না এটি করার সর্বোত্তম উপায়;)


1

আমি এটি ব্যবহার করেছি, ভাল ফলাফল সহ ..

ini=$("#id").val();
a=0;
$("#id").keyup(function(e){
    var charcode = (e.which) ? e.which : e.keyCode;
    // for decimal point
    if(!(charcode===190 || charcode===110))
    {           // for numeric keys andcontrol keys
        if (!((charcode>=33 && charcode<=57) || 
        // for numpad numeric keys
        (charcode>=96 && charcode<=105) 
        // for backspace
        || charcode==8)) 
        {
            alert("Sorry! Only numeric values allowed.");
            $("#id").val(ini);
        }
        // to include decimal point if first one has been deleted.
        if(charcode===8)
        {
            ini=ini.split("").reverse();
            if(ini[0]==".")
            a=0;                 
        }
    }
    else
    {
        if(a==1)
        {
            alert("Sorry! Second decimal point not allowed.");
            $("#id").val(ini);
        }
        a=1;
    }
    ini=$("#id").val();
});


find keycodes at http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

1

এটি খুব সহজ যে আমরা ইতিমধ্যে একটি জাভাস্ক্রিপ্ট ইনবিল্ট ফাংশন "isNaN" আছে।

$("#numeric").keydown(function(e){
  if (isNaN(String.fromCharCode(e.which))){ 
    return false; 
  }
});
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.