есть поле input Как средствами js ограничивать величину вводимого числа? Есть свои варианты, но они кривоваты. Хотелось бы прочитать советы более опытных людей.
Code: function limitText(limitField, limitCount, limitNum) { if (limitField.value.length > limitNum) { limitField.value = limitField.value.substring(0, limitNum); } else { limitCount.value = limitNum - limitField.value.length; } } Code: <form name="form"> <textarea name="message" onKeyDown="limitText(this,this.form.count,30);" onKeyUp="limitText(this,this.form.count,30);"> </textarea> <br> <input readonly type="text" name="count" size="3" value="30"> символов осталось. </form> (c) Google
HTML: <script> numlimit = 999; // tut postavish limit window.onload = function() { var oldvalue = document.getElementById('txtlimit').value; } </script> <input type="text" id="txtlimit" onKeyUp="if(this.value>numlimit){this.value=oldvalue;alert('Wrong number!');}else{oldvalue=this.value;}">
Только вот не сработает, если юзер кликнет правой кнопкой и вставит из буфера обмена большое число в input. Да и буквы не фильтруются... Самым надежным вариантом, по-моему, будет сделать numeric up-down.
http://caniuse.com/input-number браузеры !html5 не поймут numberic up-down. по моему через js все лучше фильтровать.
Почему это? Делаешь div для номера, пару div'ов - кнопки вверх-вниз, биндишь ивенты нажатия на них, сам все рисуешь и контролируешь... Даже IE 4 понял бы.
Не тупите Code: <input id="myinput" onchange="javascript:checkme(this.id,123);" onkeyup="this.onchange();" onkeydown="this.onchange();"> <script> function checkme(id,maxnum) { var inp=document.getElementById(id); if(isNaN(inp.value,10)){inp.value=0;} if(parseInt(inp.value,10)>=maxnum){inp.value=maxnum;} } </script>
Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> <html><head></head> <body> <input oninput="a=this.value.replace(/[^\d]+/g,'');this.value=a>10?10:a"> </body> </html> работает в opera12 ff13 & chrome20, а то что там разработчики осла решили использовать вместо стандартов, меня, мягко скажем, не ебёт.
может в стандарт и не входит. но у меня проблем с этим не было никогда в нормальных браузерах. можете считать меня быдлокодером.
PHP: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style> .numeric_parent { overflow: hidden; } .numeric_right { float: left; width: 20px; height: 20px; background: #888; border: 1px solid #888; } .numeric_left { float: left; overflow: hidden; height: 20px; width: 100px; background: #eee; text-align: right; border: 1px solid black; } .numeric_up { height: 10px; background-color: red; } .numeric_down { height: 10px; background-color: blue; } .numeric_dummy { clear: left; } </style> <script language='JavaScript'> var input_timeout; var ticks = 0; function start_numerics() { if(document.getElementsByClassName == undefined) { document.getElementsByClassName = function(cl) { var retnode = []; var myclass = new RegExp('\\b'+cl+'\\b'); var elem = this.getElementsByTagName('*'); for (var i = 0; i < elem.length; i++) { var classes = elem[i].className; if (myclass.test(classes)) { retnode.push(elem[i]); } } return retnode; } }; var numeric_controls = document.getElementsByClassName("numeric_updown"); var numeric_controls_array = Array.prototype.slice.call(numeric_controls, 0); for(var i = 0; i < numeric_controls_array.length; ++i) { var c = numeric_controls_array[i]; if(c.tagName == 'INPUT' && c.type == "text") { var main_elem = document.createElement("div"); var value_elem = document.createElement("div"); var controls_elem = document.createElement("div"); var up_elem = document.createElement("div"); var down_elem = document.createElement("div"); var dummy = document.createElement("div"); main_elem.clessName = "numeric_parent"; value_elem.className = "numeric_left"; controls_elem.className = "numeric_right"; up_elem.className = "numeric_up"; down_elem.className = "numeric_down"; dummy.className = "numeric_dummy"; value_elem.innerHTML = c.value; c.parentNode.insertBefore(main_elem, c); main_elem.appendChild(value_elem); main_elem.appendChild(controls_elem); controls_elem.appendChild(up_elem); controls_elem.appendChild(down_elem); main_elem.appendChild(dummy); var max_number = parseInt(c.getAttribute('max_number')); (function(x, y, z) { up_elem.onmousedown = function(){ return add_value(x, y, z); }; up_elem.onmouseup = function(){ clearInterval(input_timeout); } down_elem.onmousedown = function(){ sub_value(x, y); } down_elem.onmouseup = function(){ clearInterval(input_timeout); } }) (value_elem, c, max_number); c.style.display = "none"; } } } function get_increment(t) { if(t <= 20) return 1; if(t <= 50) return 10; return 100; } function add_value_timeout(disp, control, max_number, first_tick) { var value = parseInt(control.value); value += get_increment(ticks); if(value > max_number) value = max_number; control.value = value; disp.innerHTML = control.value; if(first_tick) { clearInterval(input_timeout); input_timeout = setInterval(function(){add_value_timeout(disp, control, max_number);}, 50); } ++ticks; } function sub_value_timeout(disp, control, first_tick) { var value = parseInt(control.value); value -= get_increment(ticks); if(value < 0) value = 0; control.value = value; disp.innerHTML = control.value; if(first_tick) { clearInterval(input_timeout); input_timeout = setInterval(function(){sub_value_timeout(disp, control);}, 50); } ++ticks; } function add_value(disp, control, max_number) { ticks = 0; add_value_timeout(disp, control, max_number); input_timeout = setInterval(function(){add_value_timeout(disp, control, max_number, true);}, 500); } function sub_value(disp, control) { ticks = 0; sub_value_timeout(disp, control); input_timeout = setInterval(function(){sub_value_timeout(disp, control, true);}, 500); } window.onload = function() {start_numerics();} </script> </head> <body> <form> <input type="text" class="numeric_updown" name="val1" value="123" max_number="200"><br /> <input type="text" class="numeric_updown" name="val2" value="100" max_number="5000"><br /> <input type="text" class="numeric_updown" name="val3" value="100500" max_number="500000"><br /> <input type="text" class="numeric_updown" name="val4" value="5" max_number="10"><br /> <input type="submit" value="Send"> </form> </body> </html> Идея понятна, работать будет во всех браузерах. Со стилями только помудрить, чтобы отображалось все нормально и на кнопках картинки "вверх" и "вниз" были. Форма отправляется хорошо, несмотря на полную "яваскриптовость" контролов. Кстати, код будет работать и без JavaScript - просто отобразятся поля ввода.