Функции для ввода денежных сумм и чисел в текстовые поля html форм
Ввод чисел для представления денежных сумм в текстовые поля html форм
При вводе в формы денежных сумм пользователь может случайно набрать лишний ноль или отделить копейки не точкой, а запятой, что
может вызвать ошибки обработки, поэтому удобно вводить суммы и другие десятичные числа в текстовые поля ,обрабатывая введенные значения функциями форматирования.
Для форматированного ввода чисел используются обычные текстовые поля (<INPUT type=text >)
Функции форматирования ставятся на соответствующие события (например onkeyup,onkeydown ....) текстового поля.
В приведенных функциях качестве разделителя целой и дробной части используется знак "." или ","- (так, как пользователь привык) результат записывается в указанное поле в виде строки
, которая форматируется прямо в текстовом поле.
В приведенных примерах вместо фильтрации применяется метод исправления - любой символ, не соответствующий содержанию поля отображается и тут же исчезает (после отжатия клавиши).
Пользователь нажимает минимум клавиш и чувствует себя комфортнее, видя что компьютер отображает все введенные символы (при фильтрации иногда возникает ощущение, что клавиатура не работает).
Программно на языке javascript введенное числовое значение можно получить как результат регулярного выражения:money=eval(textObj.value.replace(/\'/g,"").replace(/\,/,"."))
Начальный текст поля заменяется отформатированной строкой, размер шрифта, цвет оформление рамки и т.д. соответствует свойствам элемента-контейнера.
Примеры ввода чисел
Форматированый ввод десятичного числа - функция inp_sum(textObj)
HTML КОД:<input type=text value="кликните сюда" onkeyup=inp_sum(this) onkeydown=inp_sum(this) onpaste=inp_sum(this) onfocus=inp_sum(this)>
function inp_sum(e_field){
///////////ввод суммы c разделением тысяч и десятичными знаками////////////////////
/////////////создание TextRange и запоминание позиции курсора
if("createRange" in document){c_p=e_field.selectionEnd
ie=false }
else{ie=true}
if(ie){
e_range=e_field.createTextRange()
e_range.expand("character",e_field.value.length)
r=document.selection.createRange()
r.setEndPoint("StartToStart",e_range)
c_p=r.text.length
//////////// форматирование введенной строки
}
txt=e_field.value
txt1=""
brd=txt.match(/[.,]/)
if(brd==null){brd=txt.length}else{brd=brd.index}
p_let=""
i_dig=0
for(i=0;i<txt.length;i++){ii=txt.length-1-i
let=txt.charAt(ii)
if("0123456789".indexOf(let)>=0){is_digit=true}else{is_digit=false}
if(is_digit)i_dig++
if(ii==brd)i_dig=0
if(ii>=brd){if(is_digit||(ii==brd&&(let=="."||let==","))){txt1=let+txt1}else{if(c_p>ii)c_p--}}
if(ii<brd){if(is_digit){txt1=let+txt1}else{if(c_p>ii)c_p--}
if(is_digit&&i_dig%3==0&&i_dig!==0&&ii!==0)
{txt1="'"+txt1;if(c_p>=ii)c_p++}
}
}
/////////////сохранение готовой строки и восстановление позиции курсора
e_field.value=txt1
if(ie){r.move("character",c_p)
r.select()
}else{e_field.setSelectionRange(c_p,c_p)}
}
Форматированый ввод с целого числа - функция - inp_isum(textObj)
HTML КОД:<input type=text value="кликните сюда" onkeyup=inp_isum(this) onkeydown=inp_isum(this) onpaste=inp_isum(this) onfocus=inp_isum(this)>
function inp_isum(e_field){
///////////ввод целой суммы c разделением тысяч////////////////////
/////////////запоминание позиции курсора
if("createRange" in document){c_p=e_field.selectionEnd
ie=false }
else{ie=true}
if(ie){
e_range=e_field.createTextRange()
e_range.expand("character",e_field.value.length)
r=document.selection.createRange()
r.setEndPoint("StartToStart",e_range)
c_p=r.text.length
//////////// форматирование введенной строки
}
txt=e_field.value
txt1=""
brd=txt.match(/[.,]/)
if(brd==null){brd=txt.length}else{brd=brd.index}
p_let=""
i_dig=0
for(i=0;i<txt.length;i++){ii=txt.length-1-i
let=txt.charAt(ii)
if("0123456789".indexOf(let)>=0){is_digit=true}else{is_digit=false}
if(is_digit)i_dig++
if(ii==brd)i_dig=0
{if(is_digit){txt1=let+txt1}else{if(c_p>ii)c_p--}
if(is_digit&&i_dig%3==0&&i_dig!==0&&ii!==0)
{txt1="'"+txt1;if(c_p>=ii)c_p++}
}
}
/////////////сохранение готовой строки и восстановление позиции курсора
e_field.value=txt1
if(ie){r.move("character",c_p)
r.select()
}else{e_field.setSelectionRange(c_p,c_p)}
}
Форматированый ввод денежной суммы функция inp_sum_n(textObj,n)
HTML КОД:<input type=text value="кликните сюда" onkeyup=inp_sum_n(this,2) onkeydown=inp_sum_n(this,2) onpaste=inp_sum_n(this,2) onfocus=inp_sum_n(this,2)>
function inp_sum_n(e_field,n_dec){
///////////ввод целой суммы c разделением тысяч////////////////////
if("createRange" in document){c_p=e_field.selectionEnd
ie=false }
else{ie=true}
if(ie){
e_range=e_field.createTextRange()
e_range.expand("character",e_field.value.length)
r=document.selection.createRange()
r.setEndPoint("StartToStart",e_range)
c_p=r.text.length
//////////// форматирование введенной строки
}
txt=e_field.value
txt1=""
d=0
txt1=""
brd=txt.match(/[.,]/)
if(brd==null){brd=txt.length}else{brd=brd.index}
p_let=""
i_dig=0
for(i=0;i<txt.length;i++){ii=txt.length-1-i
let=txt.charAt(ii)
if("0123456789".indexOf(let)>=0){is_digit=true}else{is_digit=false}
if(is_digit)i_dig++
if(ii==brd)i_dig=0
if(ii>=brd){if(is_digit||(ii==brd&&(let=="."||let==","))){txt1=let+txt1}else{if(c_p>ii)c_p--}}
if(ii<brd){if(is_digit){txt1=let+txt1}else{if(c_p>ii)c_p--}
if(is_digit&&i_dig%3==0&&i_dig!==0&&ii!==0)
{txt1="'"+txt1;if(c_p>=ii)c_p++}
}
}
////////////////////////////////
if(n_dec>0){
brd=txt1.match(/[.,]/)
if(brd==null){brd=txt1.length}else{brd=brd.index}
while(txt1.length-1-brd>n_dec){if(c_p>=txt1.length-1)c_p--
txt1=txt1.substr(0,txt1.length-1)}
}
/////////////сохранение готовой строки и восстановление позиции курсора
e_field.value=txt1
if(ie){r.move("character",c_p)
r.select()
}else{e_field.setSelectionRange(c_p,c_p)}
}
На главную
Сообщить об ошибке
Copyright © 2011 scriptapplications.narod.ru при использовании материалов обязательна ссылка на сайт