Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: для новичков > jquery замена value в input


Автор: maxipub 8.12.2015, 17:58
Добрый день еще раз!


Ребята, итак есть input-ы для ввода чисел. По умолчанию дробная часть отделяется точкой, но многие любят использовать запятую. В любом случае это все обрабатывается на уровне приема значений (JavaScript скриптами для их обработки, PHP и т.д.), но для красоты хотелось бы "на лету" менять запятые на точки и в самих input-ах.

Отслеживаю oninput, проверяю $(this).val().indexOf(','), и если запятая имеется, делаю $(this).val($(this).val().replace(',', '.'));

Все ок, но есть один некрасивый момент. Например, пользователь ввел "100". И потом ставит курсор после первого нуля чтобы поставить точку и получить "10.0". И если вместо точки он введен запятую, она корректно заменится на точку, но курсор будет перемещен в самый конец строки. Можно ли как-то на лету делать такую замену с сохранением позиции курсора в троке?

Спасибо!

Автор: ksnk 8.12.2015, 18:30
Использовал такой вот плагин для jQuery. В комментариях - описание работы
var x = $(this).carret() - позиция курсора, перед изменением значения ее нужно сохранить, после изменения - восстановить
$(this).carret(x);

Работает только с текстовыми полями - input/textarea.
Код

    /**
     * работа с курсором. Работаем с первым элементом коллекции.
     * .carret('get')|| .carret() - выдать позицию курсора, верхняя граница отмеченного участка
     * .carret('sel') - выдать позицию курсора, верхняя и нижняя граница отмеченного участка в массиве
     * .carret('set',X,Y)|| carret(X,Y)|| carret(X) - установить курсор в поззицию
     * .carret('is',X) - проверить, что курсор в позиции X (отмеченая область считается курсором)
     * @param act
     * @param selectionStart
     * @param selectionEnd
     */
    $.fn.carret=function(act,selectionStart, selectionEnd){
        var input=this[0];
        if(!input) return 0 ;
        // анализ параметров
        if(undefined==act){
            act='get';
        } else if(typeof(act)=="number"){
            selectionEnd=selectionStart;
            selectionStart=act;
            act='set';
        } 
        if(undefined==selectionEnd)
            selectionEnd=selectionStart;

        if(act=='set'){
            if (input.setSelectionRange) {
                input.focus();
                input.setSelectionRange(selectionStart, selectionEnd);
            }
            else if (input.createTextRange) {
                var range = input.createTextRange();
                range.collapse(true);
                range.moveEnd('character', selectionEnd);
                range.moveStart('character', selectionStart);
                range.select();
            }
            return this;
        } else {
            $(input).focus();
            var cursor=[];
            if(typeof(input.selectionStart)!='undefined'){
                cursor=[ input.selectionStart,input.selectionEnd];
            } else
            if (document.selection) {
                for(var i=0;i<2;i++){
                    var sel=document.selection.createRange();
                    var clone=sel.duplicate();
                    sel.collapse(0==i);
                    clone.moveToElementText(input);
                    clone.setEndPoint(0==i?'EndToStart':'EndToEnd',sel);
                    cursor[i]=clone.text.length;
                }
            }
            if(act=='is'){
                return cursor[0]<=selectionStart && selectionStart<=cursor[1];
            }else if(act=='sel'){
                return cursor;
            } else
                return cursor[0];
        }
    };

Автор: maxipub 10.12.2015, 11:53
ksnk, спасибо большое за помощь! Порылся еще немного в теме. Решил в форме ничего не заменять, столько кода из-за такой мелочи...

Автор: maxipub 10.12.2015, 12:49
В принципе, немного поэксперементировав, не такой уж и плохой плагин... Только не $(this).carret(x);, а $(this).carret('set', x);

Спасибо еще раз! smile 

Автор: ksnk 12.12.2015, 20:51
Да, действительно, ошибка была. Так, оказывается, не проверял еще. https://jsfiddle.net/40zeuszt/1/

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)