Я разрабатываю приложение для мобильного банкинга, и меня интересует форматирование ввода суммы валюты в реальном времени.
Я уже тестировал плагин AutoNumeric и jQuery Format Currency Plugin, но у обоих есть проблемы с курсором на Android 2. *.
Есть ли у кого-нибудь решение JavaScript, совместимое с этими браузерами?
Я не знаю о autoNumeric, но http://code.google.com/p/jquery-formatcurrency/ выглядит неплохо. Выбранный jsFiddle пример не помещает каретку правильно в мой браузер для рабочего стола, но это происходит и на моем (Jellybean) Android-телефоне. (В Gingerbread мигающая панель курсора может перейти к концу строки, но вы все равно будете редактировать, где она была последней.) Попробуйте их демо: http://www.bendewey.com/code/formatcurrency/demo/format_as_you_type.html
Обычно я использую account.js Вы можете загрузить его из http://openexchangerates.github.io/accounting.js/#download
Он довольно прост в использовании. Вы можете увидеть, как он работает с той же страницы загрузки.
Я создал пару javascript-функций, которые я использую для управления курсором:
function formatMoney(myField){
if(myField.selectionStart || myField.selectionStart == '0'){
var len = myField.value.length;
var caretPos = doGetCaretPosition(myField);
myField.value = accounting.formatMoney(myField.value);
var newlen = myField.value.length;
setCaretPosition(myField, newlen != len ? (newlen > len ? caretPos + 1 : caretPos - 1) : caretPos);
}
}
function doGetCaretPosition (ctrl) {
var CaretPos = 0;
// IE Support
if (document.selection) {
ctrl.focus ();
var Sel = document.selection.createRange ();
Sel.moveStart ('character', -ctrl.value.length);
CaretPos = Sel.text.length;
}
// Firefox support
else if (ctrl.selectionStart || ctrl.selectionStart == '0')
CaretPos = ctrl.selectionStart;
return (CaretPos);
}
function setCaretPosition(elem, caretPos) {
elem.value = elem.value;
if(elem != null) {
if(elem.createTextRange) {
var range = elem.createTextRange();
range.move('character', caretPos);
range.select();
}
else {
if(elem.selectionStart) {
elem.focus();
elem.setSelectionRange(caretPos, caretPos);
}
else
elem.focus();
}
}
}
Вы можете использовать функции с текстовым полем как:
<input id="myField" type="text" onkeyup="formatMoney(this);" onChange="formatMoney(this);" onBlur="formatMoney(this);" />
Функции получения и настройки позиции каретки были получены отсюда: Установить положение каретки в текстовом поле html
Я тестировал его на эмуляторе Android 2.1. Хотя эмулятор был медленным, но, похоже, он работал. Вы можете найти скриншот здесь: https://www.dropbox.com/s/9ximuwh64kadiea/shot.JPG?dl=0
Здесь открытая исходная, хорошо внесенная, хорошо скопированная библиотека: https://github.com/plentz/jquery-maskmoney
Кажется, отвечает на ваши нужды, не так ли? Однако Havent't не тестировал его под Android.
Кажется, этот плагин jQuery - NumBox - предназначен для решения вашей проблемы.
