Last active
November 18, 2015 23:42
-
-
Save jittagornp/d2b9ac4e6b8935ed08f0 to your computer and use it in GitHub Desktop.
ป้องกันการ keyin ที่ไม่ใช่ตัวเลขลง html input text พร้อมทั้ง auto format number รูปแบบ #,###,##0
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * @author jittagornp | |
| * create 16/11/2015 | |
| * | |
| * require jQuery - https://code.jquery.com/jquery-1.11.3.min.js | |
| * require numeral - https://cdnjs.cloudflare.com/ajax/libs/numeral.js/1.4.5/numeral.min.js | |
| */ | |
| (function (document, $, numeral, SELECTOR) { | |
| $(function () { | |
| var $doc = $(document); | |
| var $selector = $(SELECTOR); | |
| var FORMAT = '#,###,###,###,##0'; | |
| function isFullNumberFormat(str) { | |
| if (isPointFormat(str) && isCommaFormat(str)) { | |
| return /^-?\d{1,3}(\,\d{3})+\.\d+$/g.test(str); | |
| } | |
| if (isPointFormat(str)) { | |
| return /^-?\d+\.\d+$/g.test(str); | |
| } | |
| if (isCommaFormat(str)) { | |
| return /^-?\d{1,3}(\,\d{3})+$/g.test(str); | |
| } | |
| return /^\-?\d+$/g.test(str); | |
| } | |
| function isNumberFormat(str) { | |
| if (isPointFormat(str)) { | |
| return /^-?\d+\.\d+$/g.test(str); | |
| } | |
| return /^\-?\d+$/g.test(str); | |
| } | |
| function isPointFormat(str) { | |
| return /\./g.test(str); | |
| } | |
| function isCommaFormat(str) { | |
| return /\,/g.test(str); | |
| } | |
| function isNotNumberFormat(str) { | |
| return str.length | |
| && !/\.$/.test(str) | |
| && !/\-$/.test(str) | |
| && !isNumberFormat(str); | |
| } | |
| function isNumberKeyCode(code) { | |
| return code >= 48 && code <= 57; | |
| } | |
| function isNumpadKeyCode(code) { | |
| return code >= 96 && code <= 105; | |
| } | |
| function isCtrlA(event) { | |
| return event.keyCode === 65 && event.ctrlKey === true; | |
| } | |
| function isCtrlC(event) { | |
| return event.keyCode === 67 && event.ctrlKey === true; | |
| } | |
| function isCtrlV(event) { | |
| return event.keyCode === 86 && event.ctrlKey === true; | |
| } | |
| function isCtrlX(event) { | |
| return event.keyCode === 88 && event.ctrlKey === true; | |
| } | |
| function isRemove(event) { | |
| return event.keyCode === 46 || event.keyCode === 8; | |
| } | |
| function specialKeyCode(event) { | |
| return $.inArray(event.keyCode, [46, 8, 9, 27, 13, 110]) !== -1 || | |
| isCtrlA(event) || | |
| isCtrlC(event) || | |
| isCtrlV(event) || | |
| isCtrlX(event) || | |
| (event.keyCode >= 35 && event.keyCode <= 39); | |
| } | |
| function isNotNumberKeyCode(event) { | |
| // Ensure that it is a number and stop the keypress | |
| return (event.shiftKey || !isNumberKeyCode(event.keyCode)) | |
| && !isNumpadKeyCode(event.keyCode); | |
| } | |
| function makeFloatingFormat(str) { | |
| return str.split(/\.(.*?)$/)[1] | |
| .replace(/./g, function (e) { | |
| return '#'; | |
| }); | |
| } | |
| function format(str) { | |
| if (isPointFormat(str)) { | |
| return numeral(str).format(FORMAT + '.' + makeFloatingFormat(str)); | |
| } | |
| return numeral(str).format(FORMAT); | |
| } | |
| function toNumber(str) { | |
| return str.replace(/\,/g, ''); | |
| } | |
| function doFormat() { | |
| var $input = $(this); | |
| if(enableFormat($input)){ | |
| var val = toNumber($input.val()); | |
| if (isNumberFormat(val)) { | |
| $input.val(format(val)); | |
| } | |
| } | |
| } | |
| function pasteFormat() { | |
| var $input = $(this); | |
| var val = $input.val(); | |
| if (val && !isFullNumberFormat(val)) { | |
| $input.val(''); | |
| } | |
| } | |
| function fromFormat() { | |
| var $input = $(this); | |
| var val = toNumber($input.val()); | |
| if (isNumberFormat(val)) { | |
| $input.val(val); | |
| } | |
| } | |
| function isNegativeORDot(event) { | |
| return event.keyCode === 189 || event.keyCode === 190; | |
| } | |
| function invalidNegativePosition(event, val) { | |
| return event.keyCode === 189 && /.+\-/g.test(val); | |
| } | |
| function doubleNegativeORDot(val) { | |
| return /(\-\-)+/g.test(val) | |
| || /(\.\.)+/g.test(val) | |
| || /(\-\.)+/g.test(val) | |
| || /(\.\-)+/g.test(val); | |
| } | |
| function cutLast($input, val) { | |
| val && $input.val(val.substr(0, val.length - 1)); | |
| } | |
| function enableFormat($el){ | |
| return $el.hasClass('number-format'); | |
| } | |
| function callback(event, onSpc, onFormat) { | |
| if (specialKeyCode(event)) { | |
| if (isRemove(event)) { | |
| onSpc && onSpc.call(this); | |
| } | |
| if (isCtrlV(event)) { | |
| pasteFormat.call(this); | |
| } | |
| return; | |
| } | |
| var $input = $(this); | |
| var val = $input.val(); | |
| if (isNegativeORDot(event)) { | |
| if (invalidNegativePosition(event, val) || doubleNegativeORDot(val)) { | |
| cutLast($input, val); | |
| event.preventDefault(); | |
| } | |
| return; | |
| } | |
| if (isNotNumberKeyCode(event)) { | |
| event.preventDefault(); | |
| return; | |
| } | |
| val = toNumber($input.val()); | |
| if (isNotNumberFormat(val)) { | |
| cutLast($input, val); | |
| event.preventDefault(); | |
| return; | |
| } | |
| if(enableFormat($input)){ | |
| onFormat && onFormat.call(this, val); | |
| } | |
| } | |
| $doc.on( | |
| 'keydown', | |
| SELECTOR, | |
| callback | |
| ).on( | |
| 'keyup', | |
| SELECTOR, | |
| function (event) { | |
| callback.call(this, event, doFormat, function (val) { | |
| $(this).val(format(val)); | |
| }); | |
| } | |
| ).on( | |
| 'submit', | |
| 'form', | |
| function () { | |
| $(this).find(SELECTOR).each(fromFormat); | |
| } | |
| ); | |
| $selector.each(doFormat); | |
| }); | |
| })(document, jQuery, numeral, 'input[type="text"].input-number'); |
วิธีใช้
แค่นำ script นี้ไปวางใน project พร้อมทั้ง
require library
- jQuery
- numeral
จากนั้นที่ <input/> ให้ add class "input-number" ดังนี้
<input type="text" class="input-number number-format"/>
แค่นี้ก็ใช้งานได้แล้วครับ
หมายเหตุ ***
ถ้าไม่ต้องการให้ auto format ไม่ต้องใส่ class "number-format" ครับ ใส่แค่
<input type="text" class="input-number"/> ก็พอ
ปัญหาที่ไม่ใช้ input="number" เพราะ
- มันทำ number format ไม่ได้ (user ขอเวลาพิมพ์ให้ format ตัวเลขให้ด้วย)
- มันพิมพ์ตัว e ได้ ครับ
jQuery plugin มีแก้ปัญหานี้ไว้ครับ
แต่ UX ไม่ดี คือ
ไม่ใช่ป้องกันการพิมพ์ แต่เป็นการพิมพ์ไปแล้วตัดออก
code ชุดนี้คือห้ามพิมพ์เลย อาจจะไม่ได้ทุกกรณีครับ แต่ก็น่าจะดีกว่าของ jQuery plugin ที่เคยเห็น
ขอบคุณครับ
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
ป้องกันการ keyin ที่ไม่ใช่ตัวเลขลง html input text พร้อมทั้ง auto format number รูปแบบ #,###,##0
เมื่อทำการ sumit form มันจะแปลง #,###,##0 กลับไปเป็นตัวเลขให้โดยอัตโนมัติ
1234567890 -> 1,234,567,890
1234567890.123 -> 1,234,567,890.123