এইচটিএমএল 5 ইনপুট টাইপ নম্বর সহ কীভাবে ভাসমান এবং দশমিক বিভাজক পরিচালনা করবেন handle

Question

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

ডট এবং কমা দিয়ে কীভাবে এই পুরো জগাখিচুড়ি?

আমার অনুসন্ধানগুলি:

ডেস্কটপ ক্রোম

• ইনপুট ধরণ = সংখ্যা
• ব্যবহারকারী ইনপুট ক্ষেত্রে "4,55" প্রবেশ করে
• $("#my_input").val(); "455" প্রদান করে
• আমি ইনপুট থেকে সঠিক মান পেতে পারি না

ডেস্কটপ ফায়ারফক্স

• ইনপুট ধরণ = সংখ্যা
• ব্যবহারকারী ইনপুট ক্ষেত্রে "4,55" প্রবেশ করে
• $("#my_input").val(); "4,55" প্রদান করে
• ঠিক আছে, আমি বিন্দু দিয়ে কমা প্রতিস্থাপন করতে এবং সঠিক ভাসা পেতে পারি

অ্যান্ড্রয়েড ব্রাউজার

• ইনপুট ধরণ = সংখ্যা
• ব্যবহারকারী ইনপুট ক্ষেত্রে "4,55" প্রবেশ করে
• যখন ইনপুট ফোকাস হারিয়ে ফেলে, মান "4" এ কেটে ফেলা হয়
• ব্যবহারকারীকে বিভ্রান্ত করছে

উইন্ডোজ ফোন 8

• ইনপুট ধরণ = সংখ্যা
• ব্যবহারকারী ইনপুট ক্ষেত্রে "4,55" প্রবেশ করে
• $("#my_input").val(); "4,55" প্রদান করে
• ঠিক আছে, আমি বিন্দু দিয়ে কমা প্রতিস্থাপন করতে এবং সঠিক ভাসা পেতে পারি

এই ধরণের পরিস্থিতিতে "সেরা অনুশীলনগুলি" কী কী যখন ব্যবহারকারী দশমিক বিভাজক হিসাবে কমা বা বিন্দু ব্যবহার করতে পারে এবং আরও ভাল ব্যবহারকারীর অভিজ্ঞতা দেওয়ার জন্য আমি এইচটিএমএল ইনপুট প্রকারটিকে নম্বর হিসাবে রাখতে চাই?

আমি কী কমাগুলিকে "ফ্লাই অন" ফ্লাইটে "বিন্দুতে রূপান্তর করতে পারি, কী ইভেন্টগুলিকে আবদ্ধ করে রাখছি, এটি কি সংখ্যা ইনপুট নিয়ে কাজ করছে?

সম্পাদনা

কারেনলিটি আমার কোনও সমাধান নেই, কীভাবে ইনপুট থেকে কোন ধরণের সংখ্যায় সেট করা হয় তা থেকে ভাসমান মান (স্ট্রিং বা সংখ্যা হিসাবে) কীভাবে পাবেন। যদি এন্ডুয়েসার "4,55" প্রবেশ করে, ক্রোম সর্বদা "455" ফেরত দেয়, ফায়ারফক্স "4,55" ফিরিয়ে দেয় যা ভাল।

এছাড়াও এটি বেশ বিরক্তিকর যে অ্যান্ড্রয়েডে (পরীক্ষিত 4.2 এমুলেটর), যখন আমি ইনপুট ফিল্ডে "4,55" প্রবেশ করি এবং অন্য কোথাও ফোকাস পরিবর্তন করি, তখন প্রবেশ নম্বরটি "4" এ কেটে যায়।

Comments

আমার অনুমান যে আপনার কয়েকটি সমস্যার মূল কারণ হ'ল ব্রাউজারগুলি একটি মার্কিন লোকালে সেট করা আছে যা দশমিক বিভাজক হিসাবে বিন্দুটি ব্যবহার করে। দেখে মনে হচ্ছে ক্রোম এবং অ্যান্ড্রয়েড বিভিন্নভাবে এতে বিভ্রান্ত হয়ে উঠছে - ক্রোম কমাটিকে একটি ডিজিটাল বিভাজক হিসাবে বিবেচনা করে, তারপর ইনপুটটিকে একটি সংখ্যায় রূপান্তর করে .val(), আবার এটিকে আবার স্ট্রিতে রূপান্তরিত করে , এবং অ্যান্ড্রয়েড অদ্ভুত কিছু করে। আপনি যখন সিস্টেমের ভাষাটিকে উপযুক্ত কিছুতে সেট করেন তখন তারা কি একইরকম আচরণ করে তা পরীক্ষা করতে পারেন?

— মিলিমুজ

এনভিএম এটি উত্তর হিসাবে পোস্ট করেছে

— kjetilh

: এছাড়াও এখানে দেখুন stackoverflow.com/a/24423879/196210

— Revious

আপনার চিত্রিতের চেয়ে পরিস্থিতি আরও খারাপ: ডাব্লুপি নামপ্যাডে আপনি যে কীবোর্ডটি বেছে নিয়েছেন তার উপর নির্ভর করে আপনি দশমিক পয়েন্ট বা কমা পাবেন। ইনপুট লোকেলটি কোনটি ছিল না তা জানার কোনও উপায় নেই (প্রয়োজনীয় ব্রাউজারের ভাষাটি অগত্যা নয়) ... সুতরাং আমি যে সর্বোত্তমটা সামনে আসতে পেরেছি (এবং আমার পক্ষে কী যথেষ্ট ভাল) তা হ'ল: var number = $(...).get(0).valueAsNumber; if (isNaN(number)) number = parseFloat($(...).val().replace(',', '.'); তবে সমাধানটি কেবল তখনই কাজ করে যদি যে নাম্বারে রাখা হয়েছে তাতে কেবল 1 টি কমা এবং অতিরিক্ত বিন্দু নেই ...

— বার্ট ব্রুইনুগে

Answer 1

আমি মনে করি উপরের উত্তরগুলিতে যা অনুপস্থিত তা হ'ল stepবৈশিষ্ট্যের জন্য আলাদা মান উল্লেখ করা দরকার , যার মান একটি ডিফল্ট 1। যদি আপনি চান যে ইনপুটটির বৈধতা অ্যালগরিদমকে ভাসমান-পয়েন্টের মানগুলি মঞ্জুর করতে পারে, সে অনুযায়ী একটি পদক্ষেপ নির্দিষ্ট করুন।

উদাহরণস্বরূপ, আমি ডলারের পরিমাণ চেয়েছিলাম, তাই আমি এর মতো একটি পদক্ষেপ নির্দিষ্ট করেছি:

 <input type="number" name="price"
           pattern="[0-9]+([\.,][0-9]+)?" step="0.01"
            title="This should be a number with up to 2 decimal places.">

মানটি পুনরুদ্ধার করতে jQuery ব্যবহার করে কোনও ভুল নেই, তবে উপাদানগুলির validity.validসম্পত্তি পেতে সরাসরি DOM এপিআই ব্যবহার করা আপনার পক্ষে দরকারী ।

দশমিক পয়েন্টের সাথে আমার একই রকম সমস্যা ছিল, তবে আমি বুঝতে পেরেছি যে সমস্যাটি ছিল কারণ এটি ছিল যে টুইটার বুটস্ট্র্যাপ স্টাইলিংয়ের ফলে একটি অবৈধ মান সহ একটি সংখ্যা ইনপুট যুক্ত করে।

এখানে একটি কোলাহল দেখানো হচ্ছে যে stepগুণটি যুক্ত করা এটি কাজ করে এবং বর্তমান মানটি বৈধ কিনা তাও পরীক্ষা করে:

• jsFiddle

টিএল; ডিআর: ভাসমান-পয়েন্ট মানের একটি stepবৈশিষ্ট্য সেট করুন , কারণ এটি ডিফল্ট হয় 1।

দ্রষ্টব্য : কমাটি আমার জন্য বৈধ নয়, তবে আমার সন্দেহ হয় যে আমি যদি আমার ওএস ভাষা / অঞ্চল সেটিংস সেট করে সেট করে যেখানে দশমিক বিভাজক হিসাবে কমা ব্যবহার করে, এটি কার্যকর হবে। * দ্রষ্টব্য দ্রষ্টব্য *: ওবান ভাষা / কীবোর্ড সেটিংসের ক্ষেত্রে এটি ছিল না * উবুন্টু / জিনোমে 14.04 এ জার্মান *।

Comments

আপনি যদি ইচ্ছামত অনেক দশমিক জায়গার অনুমতি দিতে চান তবে এখানে যেমন দেখানো হয়েছে তার পরিবর্তে stepঅ্যাট্রিবিউটটি নির্দিষ্ট করুন। একটি ডেমো জন্য নাথচিকেতা এর ঝাঁকুনির এই টুইট সংস্করণ দেখুন । "any""0.01"

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

আমি কমাগুলি বৈধতা না দেওয়ার বিষয়গুলিতেও ছড়িয়ে পড়েছি, যদিও আমি "1,234.56" এ প্রবেশ করছিলাম <input type="number" step="any">। এইচটিএমএল 5 বৈধতা বন্ধ করার উপায় খুঁজে পাচ্ছি না। আমি ত্রুটি বার্তাটি বন্ধ বা কাস্টমাইজ করতে পারি, তবে ইনপুট থেকে মান পুনরুদ্ধার করা সর্বদা ক্র্যাপশুট। কোন ধারনা?

— নিক জি।

This attribute applies when the value of the type attribute is text, search, tel, url, email, or password, otherwise it is ignored.সুতরাং type="number"

— নিদর্শনটি

মত মাইকেল বলেন, পরিবর্তন করুন typeথেকে text, অন্যথায় আপনার উত্তর নেই জানার জন্য না।

— phil294

Answer 2

W3.org মতে মান এর অ্যাট্রিবিউট সংখ্যা ইনপুট একটি হিসাবে সংজ্ঞায়িত করা হয় ফ্লোটিং পয়েন্ট সংখ্যা । ভাসমান-পয়েন্ট সংখ্যাটির বাক্য গঠনটি কেবল বিন্দুটিকে দশমিক বিভাজক হিসাবে স্বীকার করে।

আমি নীচে কয়েকটি বিকল্প তালিকাভুক্ত করেছি যা আপনার পক্ষে সহায়ক হতে পারে:

1. প্যাটার্ন বৈশিষ্ট্য ব্যবহার করে

সঙ্গে প্যাটার্ন অ্যাট্রিবিউট আপনি একটি HTML5 এর সামঞ্জস্যপূর্ণ ভাবে একটি রেগুলার এক্সপ্রেশন সঙ্গে অনুমতি দেওয়া বিন্যাস নির্দিষ্ট করতে পারেন। এখানে আপনি উল্লেখ করতে পারেন যে কমা অক্ষর অনুমোদিত এবং সহায়ক প্যাটার্নটি ব্যর্থ হলে একটি প্রতিক্রিয়া বার্তা।

<input type="number" pattern="[0-9]+([,\.][0-9]+)?" name="my-num"
           title="The number input must start with a number and use either comma or a dot as a decimal character."/>

দ্রষ্টব্য: ক্রস ব্রাউজার সমর্থন অনেক পৃথক করে। এটি সম্পূর্ণ, আংশিক বা অ-অস্তিত্বহীন হতে পারে ..

2. জাভাস্ক্রিপ্ট বৈধতা

আপনি একটি সাধারণ কলব্যাকের সাথে বাঁধার চেষ্টা করতে পারেন উদাহরণস্বরূপ অনভিজ্ঞ (এবং / বা অস্পষ্ট ) ইভেন্ট যা হয় কমা প্রতিস্থাপন করবে বা সমস্ত একসাথে বৈধ করে তুলবে।

৩. ব্রাউজারের বৈধতা অক্ষম করুন ##

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

<input type="number" formnovalidate />

4. সংমিশ্রণ ..?

<input type="number" pattern="[0-9]+([,\.][0-9]+)?" 
           name="my-num" formnovalidate
           title="The number input must start with a number and use either comma or a dot as a decimal character."/>

Comments

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

— দেবহা

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

— কেজিলি

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

— দেব

আমাদের দশমিক বিভাজক হিসাবে বিন্দু এবং কমা উভয়ই সমর্থন করার প্রয়োজন হওয়ায় আমরা ডেস্কটপে = "পাঠ্য" টাইপের সাথে বৈধতার জন্য প্যাটার্ন ব্যবহার করার পরিকল্পনা করি। তারপরে আমরা মোবাইল ডিভাইস সনাক্তকরণের জন্য বৈশিষ্ট্য সনাক্তকরণ যুক্ত করব এবং এটি প্রযোজ্য হলে টাইপ = "নম্বর" ব্যবহার করব।

— আশ্চর্য

Answer 3

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

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

Answer 4

valueAsNumberপরিবর্তে ব্যবহার করুন .val()।

ইনপুট . মানসংখ্যা [= মান]

যদি প্রযোজ্য হয় তবে ফর্ম নিয়ন্ত্রণের মান উপস্থাপন করে এমন একটি নম্বর প্রদান করে; অন্যথায়, নাল ফিরে।
সেট করা যেতে পারে, মান পরিবর্তন করতে।
যদি নিয়ন্ত্রণ না হয় তারিখ- বা সময় ভিত্তিক বা সংখ্যাসূচক হয় তবে একটি INVALID_STATE_ERR ব্যতিক্রম ছুঁড়ে।

Comments

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

— আশ্চর্য

উইন্ডোজ ফোনে ধারাবাহিকভাবে কাজ না করা বলে মনে হচ্ছে; সর্বদা ফিরে আসে NaN।

— বার্ট ব্রুইনোগে

@ বারবারব্রিনুঘে, আপনি মান হিসাবে কী বরাদ্দ দিচ্ছেন?

— মাইক স্যামুয়েল

'9', '9,1', '9.1' নিয়েও কাজ করছে বলে মনে হচ্ছে না। ফোন মার্কিন হিসাবে কনফিগার করা হয়েছে, কীবোর্ড লেআউট পরীক্ষিত এন-ইউএস, এনএল-বিই।

— বার্ট ব্রুনুঘে

Answer 5

একটি পাঠ্য প্রকার ব্যবহার করে তবে সংখ্যার কীবোর্ডের উপস্থিতি জোর করে

<input value="12,4" type="text" inputmode="numeric" pattern="[-+]?[0-9]*[.,]?[0-9]+">

ইনপুটমড ট্যাগ হ'ল সমাধান

Comments

তবে এটি কেবলমাত্র আইওএস সাফারি, ক্রোম, ক্রোমিয়াম, অপেরা ... এর সর্বশেষ সংস্করণগুলির সাথে সমস্ত ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ নয় ... caniuse.com/#feat=input-inputmode :(

— pgarciacamou

এবং অতিরিক্তভাবে আপনি মোবাইল ডিভাইসে এই ঝরঝরে নম্বর কীবোর্ডটি পান না।

— ওআইইইইই

Answer 6

আমি একটি নিখুঁত সমাধান খুঁজে পেলাম না তবে আমি সবচেয়ে ভাল করতে পেরেছি টাইপ = "টেল" ব্যবহার এবং এইচটিএমএল 5 বৈধকরণ (ফর্মনোলোডিট) অক্ষম করা:

<input name="txtTest" type="tel" value="1,200.00" formnovalidate="formnovalidate" />

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

প্রধান সমস্যা হ'ল:

• মোবাইল ব্যবহারকারীরা তাদের ফোনের কীবোর্ড দেখতে পাবেন যা নম্বর কীবোর্ডের চেয়ে আলাদা হতে পারে।
• এমনকি আরও খারাপ ফোনের কীবোর্ডে কমাটির জন্য কীও থাকতে পারে না।

আমার ব্যবহারের ক্ষেত্রে আমার কেবলমাত্র:

• কমা দিয়ে প্রাথমিক মানটি প্রদর্শন করুন (ফায়ারফক্স এটি টাইপ = সংখ্যার জন্য আলাদা করে দেয়)
• এইচটিএমএল 5 বৈধতা ব্যর্থ করবেন না (যদি কমা থাকে)
• ক্ষেত্রটি ঠিক ইনপুট হিসাবে পড়ুন (সম্ভাব্য কমা সহ)

আপনার যদি অনুরূপ চাহিদা থাকে তবে এটি আপনার পক্ষে কাজ করা উচিত।

দ্রষ্টব্য: প্যাটার্ন বৈশিষ্ট্যের সমর্থনটি আমার পছন্দ হয়নি। ফর্মনোলোইডেট আরও ভাল কাজ করছে বলে মনে হচ্ছে।

Answer 7

আপনি যখন $("#my_input").val();এটিকে ডাকবেন তখন স্ট্রিং ভেরিয়েবল হিসাবে ফিরে আসবে। সুতরাং parseFloatএবং parseIntরূপান্তর জন্য ব্যবহার করুন । আপনি যখন parseFloatনিজের ডেস্কটপ বা ফোনটি নিজের ব্যবহার করেন পরিবর্তনশীল অর্থ বুঝতে পারে।

এবং প্লাস আপনি toFixedনীচের মতো অঙ্কের গণনা যুক্ত যুক্তিযুক্ত একটি ফ্লোটকে স্ট্রিংয়ে রূপান্তর করতে পারেন :

var i = 0.011;
var ss = i.toFixed(2); //It returns 0.01

Comments

কাজ করে না. আইই 11 এ পার্সফ্লোট ("1,5") চেষ্টা করুন। রিটার্নস 1. ভাষা ওএস এবং আইই উভয়ের জন্যই জার্মান।

— T3rm1

Answer 8

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

আমার সমাধান

আমি keyupফর্ম ইনপুটটিতে একটি ইভেন্ট হ্যান্ডলার যুক্ত করেছি এবং রাজ্যটিকে ট্র্যাক করেছি এবং এটি আবার কার্যকর হয়ে গেলে মান সেট করে।

খাঁটি জেএস স্নিপেট জেএসএফআইডিডিএল

var currentString = '';
var badState = false;
var lastCharacter = null;

document.getElementById("field").addEventListener("keyup",($event) => {
  if ($event.target.value && !$event.target.validity.badInput) {
          currentString = $event.target.value;
  } else if ($event.target.validity.badInput) {
    if (badState && lastCharacter && lastCharacter.match(/[\.,]/) && !isNaN(+$event.key)) {
      $event.target.value = ((+currentString) + (+$event.key / 10));
      badState = false;
    } else {
      badState = true;
    }
  }
  document.getElementById("number").textContent = $event.target.value;
  lastCharacter = $event.key;
});

document.getElementById("field").addEventListener("blur",($event) => {
	if (badState) {
    $event.target.value = (+currentString);
    badState = false;
		document.getElementById("number").textContent = $event.target.value;
  }
});

#result{
  padding: 10px;
  background-color: orange;
  font-size: 25px;
  width: 400px;
  margin-top: 10px;
  display: inline-block;
}

#field{
  padding: 5px;
  border-radius: 5px;
  border: 1px solid grey;
  width: 400px;
}

<input type="number" id="field" keyup="keyUpFunction" step="0.01" placeholder="Field for both comma separators">

<span id="result" >
 <span >Current value: </span>
 <span id="number"></span>
</span>

কৌণিক 9 স্নিপেট

@Directive({
  selector: '[appFloatHelper]'
})
export class FloatHelperDirective {
  private currentString = '';
  private badState = false;
  private lastCharacter: string = null;

  @HostListener("blur", ['$event']) onBlur(event) {
    if (this.badState) {
      this.model.update.emit((+this.currentString));
      this.badState = false;
    }
  }

  constructor(private renderer: Renderer2, private el: ElementRef, private change: ChangeDetectorRef, private zone: NgZone, private model: NgModel) {
    this.renderer.listen(this.el.nativeElement, 'keyup', (e: KeyboardEvent) => {
      if (el.nativeElement.value && !el.nativeElement.validity.badInput) {
        this.currentString = el.nativeElement.value;
      } else if (el.nativeElement.validity.badInput) {
        if (this.badState && this.lastCharacter && this.lastCharacter.match(/[\.,]/) && !isNaN(+e.key)) {
          model.update.emit((+this.currentString) + (+e.key / 10));
          el.nativeElement.value = (+this.currentString) + (+e.key / 10);
          this.badState = false;
        } else {
          this.badState = true;
        }
      }       
      this.lastCharacter = e.key;
    });
  }
  
}

<input type="number" matInput placeholder="Field for both comma separators" appFloatHelper [(ngModel)]="numberModel">

Answer 9

আমার সুপারিশ? JQuery মোটেও ব্যবহার করবেন না। আপনার মতো সমস্যাও আমার ছিল। আমি খুঁজে পেয়েছি যে $('#my_input').val()সবসময় কিছু অদ্ভুত ফলাফল ফিরে আসে।

এর document.getElementById('my_input').valueAsNumberপরিবর্তে $("#my_input").val();এবং পরে ব্যবহার Number(your_value_retrieved)করার চেষ্টা করুন, একটি সংখ্যা তৈরি করার চেষ্টা করুন। মান যদি NaN হয় তবে আপনি অবশ্যই জানেন যে এটি কোনও সংখ্যা নয়।

একটি যুক্ত করার বিষয় হ'ল আপনি যখন ইনপুটটিতে একটি সংখ্যা লিখবেন, ইনপুটটি আসলে প্রায় কোনও অক্ষর গ্রহণ করবে (আমি ইউরো চিহ্ন, একটি ডলার এবং অন্যান্য সমস্ত বিশেষ অক্ষর লিখতে পারি), তাই এটি ব্যবহার করে মানটি পুনরুদ্ধার করা ভাল using .valueAsNumberপরিবর্তে jQuery ব্যবহার করুন।

ওহ, এবং বিটিডাব্লু, এটি আপনার ব্যবহারকারীদের আন্তর্জাতিককরণ যুক্ত করতে দেয় (যেমন: দশমিক সংখ্যা তৈরি করার জন্য বিন্দুর পরিবর্তে কমাগুলি সমর্থন করুন)। কেবল Number()অবজেক্টটিকে আপনার জন্য কিছু তৈরি করতে দিন এবং এটি দশমিক-নিরাপদ হবে, তাই বলে।

Comments

সমস্যা jQuery দ্বারা সৃষ্ট নয়, এবং আমি দেখতে পাচ্ছি valueAsNumberযে ব্রাউজারগুলির পাশাপাশি ধারাবাহিকভাবে কাজ করে না।

— বার্ট ব্রুইনোগে

Answer 10

মনে হচ্ছে আপনি নিজের সংখ্যার ইনপুটগুলিতে লোকালস্ট্রিং () ব্যবহার করতে চান।

এর ব্যবহারের জন্য https://developer.mozilla.org/en-US/docs/Web/JavaScript/ উল্লেখ / গ্লোবাল_অবজেক্টস / নাম্বার / টো লোকাল স্ট্রিং দেখুন ।

জেএসে সংখ্যার স্থানীয়করণও ক্রমটির জন্য কাজ না করে আন্তর্জাতিকীকরণের (সংখ্যা বিন্যাসকরণ "num.toLocaleString ()") এর আওতাভুক্ত

Comments

উত্তরটি সম্পূর্ণরূপে লিঙ্কযুক্ত সামগ্রীর আওতায় থাকলেও সমাধানটির আরও ব্যাখ্যা দেওয়া স্বাভাবিক।

— ইভান এইচ

যদি ব্যাক এন্ড সার্ভারটি ব্রাউজারের পরিবর্তে লোকেল নির্ধারণ করে তবে এই পদ্ধতির অন্যান্য পদ্ধতির চেয়ে ভাল বলে মনে হচ্ছে। দুর্ভাগ্যক্রমে, toLocaleStringপ্ল্যাটফর্মগুলি জুড়ে নির্ভরযোগ্য নয়।

— বার্ট ব্রুইনোগে

২০১৫ সালে ক্রস প্ল্যাটফর্ম সমর্থন আমার কাছে যথেষ্ট প্রশস্ত মনে হচ্ছে, উদাহরণস্বরূপ মজিলাস ডিভনেট দেখুন । তবে এটি এখনও যদি আপনার উদ্বেগের বিষয় হয় তবে এখানে সম্ভাব্য সমাধানগুলি সন্ধান করুন।

— স্ট্যাকাসেক

মজিলাস ডিভনেট মোবাইল ব্রাউজারগুলির জন্য প্রায় কোনও তুলনামূলক দোষ দেখায় না এবং সংখ্যার পাঠ্যক্ষেত্র সর্বাধিক সুবিধা প্রদান করতে পারে offer (আসল প্রশ্নটি দেখুন))

— বার্ট ব্রুইনুগে

... এবং পর্যাপ্ত বিকল্পের বেশি দেখানো হয়েছে এবং রেফারেন্স করা হয়েছে। আনন্দ কর.

— স্ট্যাকাসেক