სკრიპტების არსი, რომელსაც შემდგომ განვიხილავთ, მდგომარეობს იმაში, რომ დაიჭიროთ ვიზიტორის ქმედებები და აუკრძალოთ მას რაიმეს შეყვანა გარკვეულ სფეროში, გარდა რიცხვებისა. ანუ როცა კურსორი ველზეა ფოკუსირებული, როცა ცდილობ კლავიატურაზე ასოების დაჭერას, ველში არაფერი მოხდება, ამავდროულად შეგიძლია შეიყვანო ნომრები და რაღაც სიმბოლოები, მაგალითად + - () და ა.შ. , რომელიც შეიძლება საჭირო იყოს ველების ტელეფონის ნომრისთვის ან სხვა ციფრული ნომრისთვის.
ამ სკრიპტის მუშაობისთვის, ჯერ დაგჭირდებათ ველი ნომრის შესაყვანად. მაგალითად, თქვენ გაქვთ ველი ფორმის შიგნით, რომელიც ასე გამოიყურება:
პირველი სკრიპტი იყენებს jQuery-ს, ასე რომ თქვენ უნდა დაამატოთ კავშირი jQuery ბიბლიოთეკაში თქვენი საიტის სათაურში დახურვის თაობამდე ან ქვედა ძირში დახურვის ტექსტის წინ. თუ თქვენ გააკეთეთ ეს ან ამას აკეთებს შინაარსის მართვის სისტემა (საიტის ძრავა), მაშინ ამის გაკეთება არ გჭირდებათ. შეგიძლიათ ნახოთ წყარო კოდისაიტი და თუ არის სადმე მსგავსი ხაზი, მაშინ ეს ნაბიჯი უნდა გამოტოვოთ. თუ კავშირი არ არის, მაშინ უნდა დაამატოთ შემდეგი ხაზი:
ახლა თავად სცენარის ჯერია. ჩვენ ვამატებთ მას ცალკე ფაილიდა დააკავშირეთ იგი ბიბლიოთეკის შემდეგ ან ჩასვით ტეგებში:
/// კოდი აქ...
კარგად, თავად ფაქტობრივი კოდი:
JQuery(document).ready(function($)( $.fn.forceNumbericOnly = function() ( return this.each(function() ( $(this).keydown(function(e) ( var key = e.charCode | |. e.keyCode || 0 (გასაღები == 8 || გასაღები >= 37 && გასაღები = 96 && გასაღები 57) ;
პირადად მე ვიყენებ პირველ კოდს, ეს უფრო მოსახერხებელია ჩემთვის. რომელს აირჩევთ, თქვენზეა დამოკიდებული.
სულ ესაა, მადლობა ყურადღებისთვის. 🙂
ჯავასკრიპტის ვირტუალური გასაღების კოდების ცხრილი, რომელიც ზემოთ იყო დაპირებული.
გასაღები |
მე-10 კოდი |
გასაღები |
მე-10 კოდი |
Backspace | 8 | ||
ჩანართი | 9 | შედი | 13 |
ცვლა | 16 | Ctrl | 17 |
ალტ | 18 | პაუზა | 19 |
CapsLock | 20 | ესკ | 27 |
სივრცე | 32 | PageUp | 33 |
PageDown | 34 | დასასრული | 35 |
მთავარი | 36 | მარცხენა ისარი | 37 |
ზემოთ ისარი | 38 | მარჯვენა ისარი | 39 |
ქვემოთ ისარი | 40 | ჩასმა | 45 |
წაშლა | 46 | 0 | 48 |
1 | 49 | 2 | 50 |
3 | 51 | 4 | 52 |
5 | 53 | 6 | 54 |
7 | 55 | 8 | 56 |
9 | 57 | ა | 65 |
ბ | 66 | C | 67 |
68 | ე | 69 | |
ფ | 70 | გ | 71 |
ჰ | 72 | მე | 73 |
ჯ | 74 | კ | 75 |
ლ | 76 | მ | 77 |
ნ | 78 | ო | 79 |
პ | 80 | ქ | 81 |
რ | 82 | ს | 83 |
თ | 84 | უ | 85 |
ვ | 86 | ვ | 87 |
X | 88 | ი | 89 |
ზ | 90 | Windows-ის მარცხენა გასაღები | 91 |
Windows-ის მარჯვენა გასაღები | 92 | აპლიკაციების გასაღები | 93 |
ნუმპედი 0 | 96 | ნუმპედი 1 | 97 |
ნუმპედი 2 | 98 | ნუმპედი 3 | 99 |
ნუმპედი 4 | 100 | ნუმპედი 5 | 101 |
ნუმპედი 6 | 102 | ნუმპედი 7 | 103 |
ნუმპედი 8 | 104 | ნუმპედი 9 | 105 |
NumPad * | 106 | ნუმპადი + | 107 |
NumPad - | 109 | NumPad. | 110 |
NumPad / | 111 | F1 | 112 |
F2 | 113 | F3 | 114 |
F4 | 115 | F5 | 116 |
F6 | 117 | F7 | 118 |
F8 | 119 | F9 | 120 |
F10 | 121 | F11 | 122 |
F12 | 123 | NumLock | 144 |
ScrollLock | 145 | PrintScreen | 154 |
მეტა | 157 | ; | 186 |
= | 187 | , | 188 |
- | 189 | . | 190 |
/ | 191 | ~ | 192 |
[ | 219 | \ | 220 |
] | 221 | " | 222 |
მე მივიღე საკმაოდ სტანდარტული დავალება: მომხმარებლის მიერ შეყვანილი სიმბოლოების გაფილტვრა, ანუ მომხმარებელს შეუძლია შეიყვანოს რიცხვებისა და ასოების ნაკრები ხაზში, მაგალითად, "5s68d.4r55e.6t5" და სერვერზე მე დაზოგვისთვის უნდა გამოაგზავნოთ სწორი თანხა რუბლებში - "568.455" (რუბლი).
დავასრულე დავალება საკმარისად სწრაფად, ფოკუსირების მოვლენის მიმაგრებით, მაგრამ ჩემს გამოსავალს ჰქონდა რამდენიმე მნიშვნელოვანი ნაკლი: ამ მაგალითშიმთავრდება თანხა რუბლებში და იწყება კაპიკები? თუ მომხმარებელი შეაქვს რამდენიმე მინუსს (უარყოფითი მნიშვნელობები ამ შემთხვევაშიც სწორია), მაშინ მინუსებიდან რომელი უნდა ჩაითვალოს ხაზის დასაწყისად? და ასე შემდეგ.
ამიტომ, სცენარის მეორე ვერსია გამოჩნდა რეგულარული გამონათქვამებიგასაღების ღონისძიებაზე:
$(e.currentTarget).val(($(e.currentTarget).val()).replace(/[^0123456789.-]/, ""))
მაგრამ როგორც გაირკვა, ამ მეთოდს შესამჩნევი ნაკლი ჰქონდა (არ ვგულისხმობ, რომ მომხმარებელი ხედავს იმ სიმბოლოს, რომელიც შედის და შემდეგ ქრება), კერძოდ, თუ კურსორს მოათავსებთ, მაგალითად, შუაში. შეიყვანეთ ნომერი შეყვანისას, შეიყვანეთ ასო, შემდეგ სკრიპტი ამოჭრის ასოს, მაგრამ გადაიტანს კურსებს ხაზის ბოლოს.
ამ მიზეზით, უფროსმა მეგობარმა დამავალა დამეწერა ფუნქცია keypress ღონისძიებისთვის. 30 წუთის შემდეგ ფუნქციის მესამე ვერსია მზად იყო და ასე გამოიყურებოდა:
Function() ( return this.each(function() ( $(this).keydown(function(e) ( var key = e.charCode || e.keyCode || 0; // backspace, tab, delete, enter , ისრები, რიცხვები და კლავიატურის ნომრები ONLY // მთავარი, დასასრული, წერტილი და ნუმპედი ათწილადის დაბრუნება (გასაღები == 8 || გასაღები == 9 || გასაღები == 13 || გასაღები == 46 || გასაღები == 110 | |. გასაღები == 190 || (გასაღები >= 35 && გასაღები = 48 && გასაღები = 96 &&