Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > объединение (переменных??)

Автор: dimon3191 1.5.2012, 21:03

Доброе время суток.

Код


return numcheck.test(keychar)||keynum==46 || keynum==0;

Выше часть кода js и у меня не получается объединить keynum.
Пробовал между ними ставить || или && не помогло, так как можно их объединить подскажите пожалуйста?

Автор: ksnk 1.5.2012, 21:26

Что такое объединить?
|| и && - опреации над логическими. возвращают логическое.

Автор: dimon3191 2.5.2012, 09:30

keynum==48 это точка и она работает в браузере, а вот добавить keynum==0 мне не получается.
(Может теперь более точно выразился)

Автор: iff 2.5.2012, 15:15

1. Не ясно что такое numcheck. Должно быть, это регулярное выражение в роде /\d/. Что-бы разобраться, по запросу "numcheck.test" нашёл в сети скрипт:

Код


<html> 
<body> 
<script type="text/javascript"> 
function Numbers(e) 
{ 
var keynum; 
var keychar; 
var numcheck; 

if(window.event) // IE 
{ 
keynum = e.keyCode; 
} 
else if(e.which) // Netscape/Firefox/Opera 
{ 
keynum = e.which; 
} 
keychar = String.fromCharCode(keynum); 
numcheck = /\d/; 
return numcheck.test(keychar); 
} 
</script> 

<form> 
<input type="text" onkeypress="return Numbers(event)" /> 
</form> 

</body> 
</html>

Его задача разрешать вводить только цифры. Если вам необходимо разрешить вводить так же и точку, то можно:
а) изменить регулярное выражение

Код


numcheck = /[\d\.]/;

б) сделать так, как вы - поставить тогическое условие

Код


numcheck.test(keychar)||keynum==46

которое означает "введённый символ - цифра ИЛИ точка".
П.С. Если вы хотите организовать таким образом ввод не только целых, но и дробных чисел - то это будет не правильно, т.к. скрипт пропустит такую строку, как например ".123" или "12....2".

Что же косается нуля, то не понятно, чего хотите добится. У какой клавиши по-вашему код - ноль?

Автор: dimon3191 3.5.2012, 01:17

благодарю
без нуля я немогу передвигаться стрелками в input

а вот нашел код он мне немного полегче:

Код


function Numbers(e){
var k;
if(e.charCode!=null){k=e.charCode;}
if(window.event){k=e.keyCode;}
else if(e.which){k=e.which;}
if(k==0||k==5||k==8||k==13||k==46||k>=48&&k<=57){return true;}
else{return false;}}

а можете подсказать как сделать чтобы была только 1 точка?

Автор: Aliance 3.5.2012, 15:42

Какова первоначальная задача? Разрешить вводить только int / float?

Автор: dimon3191 4.5.2012, 01:01

насколько я знаю integer это целые числа, а float с плавающей запятой (то есть дробные),
но мне надо что бы водились числа как целые так и дробные
к примеру 5 без всякой точки
или 9.0064 уже точка нужна

Автор: ksnk 4.5.2012, 08:21

А скопированное из какого нибудь документа `100 002,345` подойдет? Тоже, вроде как, число.

imho, проверять по мере ввода символов каждый конкретный символ - неправильно. Нужно проверять конце (в onblur на элементе, onsubmit в форме) .

А так - можно пытаться по каждому клику клавиши проверять значение. Если значение не похоже на число - рисовать красную рамку вокруг элемента.

Код


<script>

function $class(cl){
    var reg; (reg=new RegExp("(^|\\b)"+cl+"(\\b|$)")).compile;
    return {
        add:function(x){
            if (!this.have(x))
                x.className+=(x.className&&' '||'')+cl;
        },
        have:function(x){
            return reg.test(x.className||'') ;
        },
        remove:function(x){
            x.className=(x.className||'').replace(reg,'')
        }
    }
}

var badinput=$class('badinput');

function checkit(el){
    if(el.value && /^\d+(\.\d+)?$/.test(el.value||'')){
        badinput.remove( el);
    } else {
        badinput.add( el);
    }
}
</script>
<style>
.badinput{
  border-color:red;
}
</style>

<input onkeyup="checkit(this)" >

Автор: Aliance 4.5.2012, 09:34

Я бы вообще использовал бы нативную html5 клиент-валидацию для помощи пользователям, а полноценную валидацию оставил бы на совести сервера.

Автор: iff 4.5.2012, 12:27

Цитата(dimon3191 @ 3.5.2012, 01:17

)

без нуля я немогу передвигаться стрелками в input

В IE при нажатии на стрелку событие onkepressed вообще не вызывается
А вот в Opera, действительно. Причём даже "с нулём" ничего не изменяется - при нажатие на стрелку генерируется код undefined, а не 0.

Цитата(dimon3191 @ 4.5.2012, 01:01

)

насколько я знаю integer это целые числа, а float с плавающей запятой (то есть дробные)

Float может быть целым числом. (Из математики - множество рациональных чисел включает в себя множество целых)

Код


<html> 
<body> 
<form> 
<input type="text" value="0" onblur="this.value=parseFloat(this.value)||0"><br>
<input type="submit">
</form> 
</body> 
</html>

Здесь поле по умолчанию содержит 0 (value="0" - можете поставить любое другое число, либо убрать этот параметр, что-бы поле было пустым по-умолчанию). Если ввести какое-либо целое или дробное число, то оно так и останется в поле, а если ввсести например "1.12нгш", то в поле останется только "1.12". Если ввести строку, например "йцукен", то в поле будет 0 ( "||0" - можете поставить здесь другое число или пустую строку вместо нуля, что-бы она выводилась, когда пользователь вводит не число, а строку).

Автор: Aliance 4.5.2012, 14:52

iff, проблема такого решения всплывает при вводе текста аля "ололо3.14" -> 0

Автор: iff 4.5.2012, 19:19

нет, пользователь должен ввести число, а он ввёл строку ("ололо3.14").

Автор: dimon3191 4.5.2012, 23:11

ksnk Дата 4.5.2012, 08:21
с одной стороны хорошо но с другой все же лучше было бы проверять символы по мере вода и если точка уже есть то запрещать ее вставлять еще раз

Aliance Дата 4.5.2012, 09:34
Я бы вообще использовал бы нативную html5 клиент-валидацию для помощи пользователям, а полноценную валидацию оставил бы на совести сервера.
html5 не все браузеры поддерживают
а насчет сервера скорей всего не подойдет так как планируется, что html файл можно скачать и запускать без доступа к глобальной сети

iff Дата 4.5.2012, 12:27

Код


onblur="this.value=parseFloat(this.value)||0"

неплохо, но да если перед цифрами идут буквы и т.п. то автоматически возвращает к нулю (жалко что не оставляет цифры)

Автор: ksnk 5.5.2012, 06:57

Цитата(dimon3191 @ 4.5.2012, 23:11

)

если точка уже есть то запрещать ее вставлять еще раз

Эээ... тоесть пример не запускался и даже не смотрелся?

Автор: dimon3191 5.5.2012, 09:01

Код


<script>
function $class(cl){
    var reg; (reg=new RegExp("(^|\\b)"+cl+"(\\b|$)")).compile;
    return {
        add:function(x){
            if (!this.have(x))
                x.className+=(x.className&&' '||'')+cl;
        },
        have:function(x){
            return reg.test(x.className||'') ;
        },
        remove:function(x){
            x.className=(x.className||'').replace(reg,'')
        }
    }
}
var badinput=$class('badinput');
function checkit(el){
    if(el.value && /^\d+(\.\d+)?$/.test(el.value||'')){
        badinput.remove( el);
    } else {
        badinput.add( el);
    }
}
</script>
<style>
.badinput{
  border-color:red;
}
</style>
<input onkeyup="checkit(this)" >

запускал смотрел
разрешает водить все только если к примеру вожу буквы рамка светится красным

Автор: Aliance 5.5.2012, 09:32

Цитата(dimon3191 @ 5.5.2012, 00:11

)

html5 не все браузеры поддерживают

Ну как бы в общем JavaScript придуман для всяких плюшек для клиента. То есть мы ему хотим помочь подсказав, что он ввел что-то не так, до того как мы отошлем форму на сервер и скажем ему тоже самое, но с перезагрузкой страницы. Поэтому этот функционал должен нести чисто информативный характер для удобства UI. Поэтому считаю можно пренебречь теми браузерами, которые не поддерживают html5.

Конечно данная задача может быть из разряда частных, если она идет чисто локально - это уже другой разговор.

Автор: ksnk 5.5.2012, 10:08

Цитата(dimon3191 @ 5.5.2012, 09:01

)

разрешает водить все только если к примеру вожу буквы рамка светится красным

Дык вот! А когда будет onSubmit нужно ту же проверку запустить, но уже с запретом сабмита при невалидации.

Вот практически полная заготовка для валидации. При надобности, можно допилить типы контролов и варианты проверок...

Код


<script>
function $class(cl){
    var reg; (reg=new RegExp("(^|\\b)"+cl+"(\\b|$)")).compile;
    return {
        add:function(x){
            if (!this.have(x))
                x.className+=(x.className&&' '||'')+cl;
        },
        have:function(x){
            return reg.test(x.className||'') ;
        },
        remove:function(x){
            x.className=(x.className||'').replace(reg,'')
        }
    }
}
var badinput=$class('badinput');

function checkit(el){
    var type=el.getAttribute('data-type'), 
        result=true,
        tag=el.tagName.toLowerCase(),
        value=(tag=='input'?el.value:0);

    switch(type||'skip'){
        case 'float':
            result=el.value && /^\d+(\.\d+)?$/.test(el.value||'')
        break;
    }
    if(tag=='form'){
        var inputs=el.getElementsByTagName('input');
        for(var i=0;i<inputs.length;i++)  result=result && checkit(inputs[i]);

    } else {
        if(result){
            badinput.remove( el);
        } else {
            badinput.add( el);
        }
    }
    return result;
}
</script>
<style>
.badinput{
  border-color:red;
}
</style>
<form action="" onsubmit="return checkit(this);">
<input data-type='float' onkeyup="checkit(this)" >
<input type='submit' value="submit">
</form>

Автор: dimon3191 7.5.2012, 21:33

Код


<script>
function Calc(){
var v=+document.getElementById('vklad').value
var s=+document.getElementById('srok').value
document.getElementById('summa').value=v*s}

function $class(cl){
    var reg; (reg=new RegExp("(^|\\b)"+cl+"(\\b|$)")).compile;
    return {
        add:function(x){
            if (!this.have(x))
                x.className+=(x.className&&' '||'')+cl;
        },
        have:function(x){
            return reg.test(x.className||'') ;
        },
        remove:function(x){
            x.className=(x.className||'').replace(reg,'')
        }
    }
}
var badinput=$class('badinput');
function checkit(el){
    var type=el.getAttribute('data-type'), 
        result=true,
        tag=el.tagName.toLowerCase(),
        value=(tag=='input'?el.value:0);
    switch(type||'skip'){
        case 'float':
            result=el.value && /^\d+(\.\d+)?$/.test(el.value||'')
        break;
    }
    if(tag=='form'){
        var inputs=el.getElementsByTagName('input');
        for(var i=0;i<inputs.length;i++)  result=result && checkit(inputs[i]);
    } else {
        if(result){
            badinput.remove( el);
        } else {
            badinput.add( el);
        }
    }
    return result;
}
</script>
<style>
.badinput{
  border-color:red;
}
</style>

Вклад:
<form action="" onsubmit="return checkit(this); Calc();">
<input data-type='float' id='vklad' onkeyup="checkit(this)" >
<input type='submit' value="submit">
</form>
<br>
Процент:<input value='40%' type='text' disabled><br>

За:
<select id='srok'>
<option disabled selected value='1'>Выбирете месяц</option>
<option value='1.4'>1 месяц</option>
<option value='1.96'>2 месяца</option>
<option value='2.744'>3 месяца</option>
<option value='3.8416'>4 месяца</option>
<option value='5.37824'>5 месяцев</option>
<option value='7.529536'>6 месяцев</option>
<option value='10.5413504'>7 месяцев</option>
<option value='14.75789056'>8 месяцев</option>
<option value='20.661046784'>9 месяцев</option>
<option value='28.9254654976'>10 месяцев</option>
<option value='40.49565169664'>11 месяцев</option>
<option value='56.693912375296'>12 месяцев</option>
</select><br>
Итоговая сумма:<input type='text' disabled id='summa'>

выбираю месяц
вписываю в форму 10 нажимаю субмит
и мне все стирает и нечего не считается

Автор: ksnk 7.5.2012, 22:54

Код


return checkit(this); Calc();

Что по вашему мнению, должна делать такая комбинация операторов? И что она на самом деле делает?

Добавлено через 1 минуту и 51 секунду

Код


<form action="" onsubmit="if( checkit(this)) Calc(); return false;">
...

Автор: dimon3191 7.5.2012, 23:31

спасибо
тему можно закрыть

Автор: magelan 21.5.2012, 12:26

dimon3191,

на заметку - http://forum.vingrad.ru/forum/topic-352192.html