কীভাবে কাঁচা মানটি <ইনপুট টাইপ = "সংখ্যা"> ক্ষেত্র পাবেন?

Question

আমি কীভাবে কোনও ক্ষেত্রের "আসল" মান পেতে পারি <input type="number">?

---

আমার একটি inputবাক্স রয়েছে এবং আমি নতুন HTML5 ইনপুট প্রকারটি ব্যবহার করছি number:

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

এটি বেশিরভাগ ক্রোম 29 এ সমর্থিত:

আমার এখন যা দরকার তা হ'ল ব্যবহারকারীরা ইনপুট বাক্সে প্রবেশ করা "কাঁচা" মান পড়ার ক্ষমতা । যদি ব্যবহারকারী কোনও নম্বর প্রবেশ করে থাকে:

তারপর edQuantity.value = 4, এবং সব ঠিক আছে।

তবে যদি ব্যবহারকারী অবৈধ পাঠ্য প্রবেশ করে তবে আমি ইনপুট-বাক্সকে লাল করতে চাই:

দুর্ভাগ্যক্রমে, একটি type="number"ইনপুট বাক্সের জন্য, যদি পাঠ্য-বাক্সে মানটি একটি সংখ্যা না হয় তবে valueএকটি খালি স্ট্রিংটি ফেরত দেয়:

edQuantity.value = "" (String);

(কমপক্ষে 29 ক্রোমে)

আমি কীভাবে একটি নিয়ন্ত্রণের "কাঁচা" মান পেতে পারি <input type="number">?

আমি ইনপুট বাক্সের অন্যান্য বৈশিষ্ট্যের জন্য ক্রোমের তালিকাটি দেখার চেষ্টা করেছি:

আমি আসল ইনপুট এর অনুরূপ এমন কিছু দেখিনি।

বা বাক্সটি "খালি" আছে কিনা, না জানার কোনও উপায় আমি খুঁজে পাইনি। হয়তো আমি অনুমান করতে পারতাম:

value          isEmpty        Conclusion
=============  =============  ================
"4"            false          valid number
""             true           empty box; not a problem
""             false          invalid text; color it red

দ্রষ্টব্য : অনুভূমিক নিয়মের পরে আপনি সবকিছু উপেক্ষা করতে পারেন; প্রশ্নটি ন্যায়সঙ্গত করার জন্য এটি কেবল ফিলার। এছাড়াও: প্রশ্নের সাথে উদাহরণটিকে বিভ্রান্ত করবেন না। বাক্সটি লাল রঙ করা ব্যতীত অন্য কারনে লোকেরা এই প্রশ্নের উত্তর পেতে চাইতে পারে (একটি উদাহরণ: অনুলুর ইভেন্টের সময় পাঠ্যটিকে "four"লাতিন "4"প্রতীক হিসাবে রূপান্তর করা )

আমি কীভাবে একটি নিয়ন্ত্রণের "কাঁচা" মান পেতে পারি <input type="number">?

বোনাস রিডিং

• উপরের সকলের jsFood (আপডেট)
• নতুন ইনপুট ধরণের জন্য Quirkmode.org এন্ট্রি

Comments

একটি সংখ্যার ইনপুট ক্ষেত্রের 'আসল' মানটি একটি সংখ্যা হতে হবে। আপনি যদি সংখ্যার মান বাদে অন্য কোনও ইনপুটকে মঞ্জুরি দিতে চান, তবে numberআপনি যে ইনপুটটি সন্ধান করছেন তা নয়; একটি সাধারণ textইনপুট ব্যবহার করুন।

— রবার্টক

@ আরবার্টক ক্রোম হ'ল এজেন্ট যা সংখ্যা ছাড়া অন্য কোনও ইনপুট মঞ্জুর করে; আমার শুধু এটি জানতে হবে যে তারা সংখ্যা ছাড়া অন্য কিছু প্রবেশ করেছে ।

— ইয়ান বয়ড

ক্ষেত্রের validityঅবস্থা পরীক্ষা করুন - আমি আশা করব typeMismatchতবে আমি নিজেকে পরীক্ষা করেছি না।

— রবার্টক

@ int32_t ষষ্ঠ লাইনটি নীচে পড়ুন (যেমন "তবে ব্যবহারকারী যদি প্রবেশ করে ..." )

— ইয়ান বয়ড

আমার ব্যবহারের ক্ষেত্রে ... আমার কাছে দুটি সংখ্যাযুক্ত ক্ষেত্র রয়েছে: অক্ষাংশ এবং দ্রাঘিমাংশ। যদি কেউ "ল্যাট, লোন" এ পেস্ট করে সঠিকভাবে পরিচালনা করেন তবে আমি তা সনাক্ত করতে চাই। টাইপ = "সংখ্যা" দিয়ে এটি বর্তমানে অসম্ভব। যেহেতু "ল্যাট, লোন" অবৈধ .. একটি রেজেেক্স সম্পাদন করার জন্য "কাঁচা" মান পাওয়ার কোনও উপায় নেই। আর একটি ব্যবহারের ক্ষেত্রে: গ্রাহকের ত্রুটি প্রদর্শন করা blahহচ্ছে : " একটি অবৈধ নম্বর"।

— ব্র্যাড কেন্ট

Answer 1

WHATWG এর মতে , বৈধ সংখ্যাযুক্ত ইনপুট না হওয়া পর্যন্ত আপনি মান পেতে সক্ষম হবেন না। ইনপুট নম্বর ক্ষেত্রের স্যানিটাইজেশন অ্যালগরিদম বলছে যে ইনপুটটি বৈধ ভাসমান পয়েন্ট সংখ্যা না হলে ব্রাউজারটি একটি খালি স্ট্রিংয়ের মান সেট করার কথা।

মান sanitization অ্যালগরিদম নিম্নরূপ: যদি মান উপাদান একটি নয় বৈধ ফ্লোটিং পয়েন্ট সংখ্যা , তারপর পরিবর্তে খালি স্ট্রিং সেট করুন।

( <input type="number">) প্রকারটি নির্দিষ্ট করে আপনি ব্রাউজারকে আপনার জন্য কিছু কাজ করতে বলছেন। অন্যদিকে, আপনি যদি অ-সংখ্যাযুক্ত ইনপুটটি ক্যাপচার করতে এবং এর সাথে কিছু করতে সক্ষম হতে চান তবে আপনাকে পুরানো চেষ্টা করা এবং সত্য পাঠ্য ইনপুট ক্ষেত্রে নির্ভর করতে হবে এবং সামগ্রীটি নিজেই বিশ্লেষণ করতে হবে।

W3 একই চশমা এবং যোগ করেছেন:

ব্যবহারকারীর এজেন্টদের অবশ্যই ব্যবহারকারীকে একটি খালি নন-স্ট্রিংয়ের মান সেট করার অনুমতি দিতে হবে না যা বৈধ ভাসমান-পয়েন্ট নম্বর নয়।

Comments

এটি কার্যকর হবে যদি ব্যবহারকারী এজেন্টরা ব্যবহারকারীকে একটি খালি নন-স্ট্রিংয়ের মান সেট করার অনুমতি না দেয় যা বৈধ ভাসমান-পয়েন্ট নম্বর নয়। তবে হোয়াটজিও যদি বলে যে এটি করা যায় না; তাহলে সেটাই উত্তর। আমার বর্তমান প্রয়োজনের জন্য নিচে যুক্ত করা হয়েছে।

— ইয়ান বয়ড

( <input type="number">) প্রকারটি নির্দিষ্ট করে আপনি ব্রাউজারকে আপনার জন্য কিছু কাজ করতে বলছেন। ব্যক্তিগতভাবে, আমি কেবল মোবাইল ব্রাউজারগুলিকে একটি সংখ্যার কীপ্যাড প্রদর্শন করতে বলছিলাম এবং একটি অপ্রীতিকর অতিরিক্ত হিসাবে বৈধতা পেয়েছি। এই সমস্যাগুলির বেশিরভাগই এই সত্য থেকেই উদ্ভূত হয়েছিল যে typeগুণটি কোন ইনপুট প্রক্রিয়াটি প্রদর্শন করবে সে সম্পর্কে বৈধতা বিধি এবং নিয়ম উভয়ই নির্ধারণ করে, তবে ডেস্কটপ ব্যবহারকারীদের ক্ষেত্রেও নম্বর বৈধতা প্রয়োগ না করে মোবাইল ব্যবহারকারীদের কাছে একটি সংখ্যাসূচক কীবোর্ড প্রদর্শন করা সম্ভব। এইচটিএমএল 5.1 অন্তত inputmodeগুণমান সহ এই সমস্যাটি সমাধান করবে ।

— মার্ক আমেরিকা

কিন্তু যখন ব্রাউজারটি যথেষ্ট পরিমাণে না করে, আমি এটি সম্পূর্ণ করতে সক্ষম হতে চাই। যেমন

— ইনপুটটির

এছাড়াও, বিভিন্ন ভাষায়, যেমন ফরাসি ভাষায়, সংখ্যার জন্য 2 টি শব্দ রয়েছে। শনাক্তকারী হিসাবে সংখ্যার জন্য একটি যেমন ক্রেডিট কার্ড নম্বর, এবং একটি গণনা নম্বরগুলির জন্য যেমন ভাসমান পয়েন্ট সংখ্যা।

— njzk2

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

— অ্যান্ডি

Answer 2

এটি প্রশ্নের উত্তর দেয় না, তবে দরকারী পরীক্ষাটি চেক করা

edQuantity.validity.valid

ValidityStateএকটি বস্তুর কি ব্যবহারকারী প্রবেশ সম্পর্কে সংকেত সনাক্ত করুন দেয়। type="number"একটি minএবং maxসেট সহ একটি ইনপুট বিবেচনা করুন

<input type="number" min="1" max="10">

আমরা সবসময় ব্যবহার করতে চাই .validity.valid।

অন্যান্য বৈশিষ্ট্যগুলি কেবল বোনাসের তথ্য দেয়:

User's Input  .value  .valid | .badInput  .rangeUnderflow  .rangeOverflow
============  ======  ====== | =========  ===============  ==============
""            ""      true   | false      false            false  ;valid because field not marked required
"1"           "1"     true   | false      false            false  
"10"          "10"    true   | false      false            false
"0"           "0"     false  | false      true             false  ;invalid because below min
"11"          "11"    false  | false      false            true   ;invalid because above max
"q"           ""      false  | true       false            false  ;invalid because not number
"³"           ""      false  | true       false            false  ;superscript digit 3
"٣"           ""      false  | true       false            false  ;arabic digit 3
"₃"           ""      false  | true       false            false  ;subscript digit 3

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

function ValidateElementAsNumber(element)
{
   //Public Domain: no attribution required.
   if ((element.validity) && (!element.validity.valid))
   {
      //if html5 validation says it's bad: it's bad
      return false;
   }

   //Fallback to browsers that don't yet support html5 input validation
   //Or we maybe want to perform additional validations
   var value = StrToInt(element.value);
   if (value != null)
      return true;
   else
      return false;
}

বোনাস

Spudly একটি দরকারী উত্তর আছে যা তিনি মুছে ফেলেছেন:

এর জন্য কেবল সিএসএস :invalidনির্বাচক ব্যবহার করুন।

input[type=number]:invalid {
    background-color: #FFCCCC;
}

যখনই কোনও অ-সংখ্যাযুক্ত বৈধ প্রবেশ করানো হয় এটি আপনার উপাদানটিকে লাল হয়ে উঠবে।

এর জন্য ব্রাউজার সমর্থন <input type='number'>প্রায় একই :invalid, তাই কোনও সমস্যা নেই।

:invalid এখানে আরও পড়ুন ।

Comments

অপেরাতে কাজ করে না। এটি বৈধ বলে যদি আপনি কোনও স্ট্রিং ইনপুট করেনও।

— বার্গি

অপেরা .validityসম্পত্তি সমর্থন করে , কিন্তু সঠিকভাবে পরিচালনা করে না .valid?!

— ইয়ান বয়ড

এটি করে, তবে কখন একটি নম্বর ইনপুট অবৈধ ? এটি ঠিক এমনভাবে কাজ করে যেমন ইনপুটটি খালি ছিল। একটি typeMismatchধারণা হতে পারে, তবে এটি কেবল ইমেল বা ইউআরএল ধরণের জন্য ...

— বার্গি

@Bergi সারণীর উপরে যেখানে সংখ্যাকে ইনপুট অবৈধ হতে পারে উদাহরণ দিচ্ছেন: "11" (10 তারপর সর্বোচ্চ), "0" (যখন মিনিট 1) "Q", "" (পরে উপাদান required)

— ইয়ান বয়েড

@ বেরগি 11/20/2012 .badInputযোগ করা হয়েছে । কিন্তু badInputইনপুটটি বৈধ কিনা তা দেখার জন্য কারও নজর দেওয়া উচিত নয়; তাদের তাকানো উচিত .valid। এটি .badInputমিথ্যা হতে পারে (এবং সঠিক) এবং এখনও অবৈধ ইনপুট রয়েছে। .validকোনও বৈধতা ত্রুটির অনুপস্থিতি হিসাবে চিহ্নিত করা হয়েছে (উদাহরণস্বরূপ মেলে না, ওভারফ্লোস, আন্ডারফ্লো), যার .badInputমধ্যে কেবল এক ধরণের ত্রুটি। উপরের চার্টটি নোট করুন যেখানে .badInputমিথ্যা, তবে ইনপুটটি এখনও অবৈধ।

— ইয়ান বয়ড

Answer 3

input.focus();
document.execCommand("SelectAll");
var displayValue = window.getSelection().toString();

Comments

সর্বত্র: ডেভেলপার.মোজিলা.আর.ইন-

— ইউএস

ফায়ারফক্সে কাজ করে না: bugzilla.mozilla.org/show_bug.cgi?id=85686 (উল্লেখ্য এই বাগটি 2001 সালে দায়ের করা হয়েছিল !!)

— ব্র্যাড কেন্ট

ফায়ারফক্স সর্বদা যথাযথ। এটি কাজ করা উচিত নয় এবং একটি বাগ

— vsync

Answer 4

সমস্ত চাপযুক্ত কীগুলি তাদের কী কোডগুলির উপর ভিত্তি করে ট্র্যাক করুন

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

http://unixpapa.com/js/key.html

ইনপুট নির্বাচন করুন এবং একটি স্ট্রিং হিসাবে নির্বাচন পান

document.querySelector('input').addEventListener('input', onInput);

function onInput(){
  this.select(); 
  console.log( window.getSelection().toString() )
}

<input type='number'>

সমস্ত ক্রেডিট: int32_t

Comments

এই সমাধানটি অন্য কোথাও চেষ্টা করা হয়েছিল, এবং কাজ করে না । বিশেষ করে ব্যবহারকারীরা যখন ছাপাখানা Delete, Backspace, Ctrl+X, Ctrl+V, Right-click-cut, Right-click-paste।

— ইয়ান বয়ড

আমি আপনার সাথে একমত, মূলত ওপি যা বলেছিল তা সম্ভব নয়। তবে, উভয় হ্যাক আমি উল্লেখ করেছি (এবং তারা হ্যাকস, আমি তা অস্বীকার করি না) কিছুটা কাজ করে। সম্ভবত তারা কারও কাজে লাগতে পারে, কোনও ক্ষেত্রে?

— স্যান্ডস্ট্রোম

আশ্চর্যজনকভাবে, নির্বাচনের জিনিসটি কাজ করছে বলে মনে হচ্ছে। সেই পদ্ধতির সীমাবদ্ধতা কী কী?

— njzk2

সীমাবদ্ধতা: পাঠ্যটি চাক্ষুষভাবে নির্বাচিত। যদি ব্যবহারকারী কিছু টাইপ করেন তবে সামগ্রীটি যাবে

— ই

একটি লাইভ ডেমো দিয়ে সম্পাদিত যা এই পদ্ধতিটি কতটা খারাপ তা দেখায়

— vsync