Вызов виртуальной клавиатуры
Добрый день, есть сайт, на нем реализовал калькулятор (с помощью тем данного форума). Все работает, все считает отлично :).
Возникла такая необходимость: При нажатии на поле ввода цифр необходимо, что бы появлялись цифры и пользователь мог с помощью мышки "накликать" цифры в это поле. Как такое можно реализовать? С помощью чего, направьте на истинный путь :) решения проблемы. Код калькулятора: <script type="text/javascript"> function check_digits(if_no_points) { var key = event.keyCode; if (!(key >= 48 && key <= 57) && key != 8 && key != 46) { event.returnValue = false; } } function calculate() { var price = 0; var min = document.getElementById('min'); var room_length = document.calc.room_length.value; var room_width = document.calc.room_width.value; var tubes_quantity = document.calc.tubes_quantity.value; var lightpoints_quantity = document.calc.lightpoints_quantity.value; var angles_quantity = document.calc.angles_quantity.value; var svetilnik_quantity = document.calc.svetilnik_quantity.value; var doroga = document.calc.doroga.value; result_perimetr.innerHTML = document.calc.room_width.value * 40; result_tubes.innerHTML = document.calc.tubes_quantity.value * 200; result_lightpoints.innerHTML = document.calc.lightpoints_quantity.value * 300; if (doroga >= 0 && doroga <= 20) doroga_new = doroga * 0; else doroga_new = doroga * 12; result_doroga.innerHTML = doroga_new; if (svetilnik_quantity >=0 && svetilnik_quantity <= 10) svetilnik_new = svetilnik_quantity * 290; else svetilnik_new = svetilnik_quantity * 250; result_svetilnik.innerHTML = svetilnik_new; if (room_length >=0 && room_length <= 14) room_length_new = room_length * 290; if (room_length >=15 && room_length <= 20) room_length_new = room_length * 280; if (room_length >=21 && room_length <= 40) room_length_new = room_length * 260; if (room_length >=41) room_length_new = room_length * 240; result_plochad.innerHTML = room_length_new; price_new.innerHTML = room_length_new + svetilnik_new + doroga_new + document.calc.room_width.value * 40 + document.calc.tubes_quantity.value * 200 + document.calc.lightpoints_quantity.value * 300; if (2900 >= price_new.innerHTML) min.style.display = ""; else min.style.display = "none"; if (0 >= price_new.innerHTML) min.style.display = "none"; } </script> <h1>Расчет стоимости потолка</h1> <table style="width: 100%"> <tr> <td> <form name="calc"> <table> <tr> <td width="40%">Площадь помещения, м:</td> <td width="20%"><input size="5" name="room_length" onKeyPress="return KeyPress(event, 1);" onkeyup="calculate();" /></td> <td width="20%"><span id="result_plochad">0</span> руб.</td> </tr> <tr> <td>Периметр помещения, м (примерно равен площади):</td> <td><input size="5" name="room_width" onKeyPress="return KeyPress(event, 2);" onkeyup="calculate();" value="" /></td> <td><span id="result_perimetr">0</span> руб.</td> </tr> <tr> <td>Кол-во труб:</td> <td><input size="5" name="tubes_quantity" onKeyPress="return KeyPress(event, 3);" onkeyup="calculate();" value="" /></td><td><span id="result_tubes">0</span> руб.</td> </tr> <tr> <td>Кол-во люстр:</td> <td><input size="5" name="lightpoints_quantity" onKeyPress="return KeyPress(event, 4);" onkeyup="calculate();" value="" /></td><td><span id="result_lightpoints">0</span> руб.</td> </tr> <tr> <td>Кол-во светильников:</td> <td><input size="5" name="svetilnik_quantity" onKeyPress="return KeyPress(event, 5);" onkeyup="calculate();" value="" /></td><td><span id="result_svetilnik">0</span> руб.</td> </tr> <tr> <td>За сколько км. от Кирова Вы находитесь (районом считается расстояние свыше 20 км. от города):</td> <td><input size="5" name="doroga" onKeyPress="return KeyPress(event, 6);" onkeyup="calculate();" value="" /></td><td><span id="result_doroga">0</span> руб.</td> </tr> <tr style="display:none;"> <td>Кол-во углов в комнате:</td> <td><input size="5" name="angles_quantity" onKeyPress="return KeyPress(event, 7);" onkeyup="calculate();" value="4" /></td> </tr> <tr style="display:none;"> <td>Площадь потолка:</td> <td><span id="roof_size"></span> м<sup>2</sup></td> </tr> <tr style="display:none;"> <td>Периметр потолка:</td> <td><span id="roof_perimeter"></span> м</td> </tr> <tr> <td>ИТОГО:*</td> <td></td> <td><span id="price_new" >0</span> руб.</td> </tr> <tr id="min" style="display:none"> <td colspan="3">Минимальная сумма заказа составляет 2900 рублей.</td> </tr> </table> </form> |
xavibeat,
:) сие есть перст указующий, следовать ли им и продолжать воля ваша ... <!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> div input{ width: 30px; height: 30px; margin: 0px; text-align: center; border-radius: 2px; } div{ display: inline-block; position: relative; top: 60px; } </style> </head> <body> <script type="text/javascript"> function check_digits(if_no_points) { var key = event.keyCode; if (!(key >= 48 && key <= 57) && key != 8 && key != 46) { event.returnValue = false; } } function calculate() { var price = 0; var min = document.getElementById('min'); var room_length = document.calc.room_length.value; var room_width = document.calc.room_width.value; var tubes_quantity = document.calc.tubes_quantity.value; var lightpoints_quantity = document.calc.lightpoints_quantity.value; var angles_quantity = document.calc.angles_quantity.value; var svetilnik_quantity = document.calc.svetilnik_quantity.value; var doroga = document.calc.doroga.value; result_perimetr.innerHTML = document.calc.room_width.value * 40; result_tubes.innerHTML = document.calc.tubes_quantity.value * 200; result_lightpoints.innerHTML = document.calc.lightpoints_quantity.value * 300; if (doroga >= 0 && doroga <= 20) doroga_new = doroga * 0; else doroga_new = doroga * 12; result_doroga.innerHTML = doroga_new; if (svetilnik_quantity >=0 && svetilnik_quantity <= 10) svetilnik_new = svetilnik_quantity * 290; else svetilnik_new = svetilnik_quantity * 250; result_svetilnik.innerHTML = svetilnik_new; if (room_length >=0 && room_length <= 14) room_length_new = room_length * 290; if (room_length >=15 && room_length <= 20) room_length_new = room_length * 280; if (room_length >=21 && room_length <= 40) room_length_new = room_length * 260; if (room_length >=41) room_length_new = room_length * 240; result_plochad.innerHTML = room_length_new; price_new.innerHTML = room_length_new + svetilnik_new + doroga_new + document.calc.room_width.value * 40 + document.calc.tubes_quantity.value * 200 + document.calc.lightpoints_quantity.value * 300; if (2900 >= price_new.innerHTML) min.style.display = ""; else min.style.display = "none"; if (0 >= price_new.innerHTML) min.style.display = "none"; } var div = document.createElement("div"); div.style.display = "none"; for (var a = "1|2|3|4|5|6|7|8|9|0|\u21d0|.".split("|"), c, i = 0; i < a.length; i++) { i % 4 == 0 && i > 0 && div.appendChild(document.createElement("br")); c = document.createElement("input"); c.onclick = function () {rezultat(this.value)}; c.type = "button"; c.value = a[i]; div.appendChild(c) } document.body.appendChild(div); function rezultat(f) { var d = div.previousSibling; e = d.value; /\d|\./.test(f) && (d.value += f); /\u21D0/.test(f) && (d.value = e.replace(/.$/, "")); calculate() }; function show(obj) { obj.parentNode.appendChild(div); div.style.display = ""; } </script> <h1>Расчет стоимости потолка</h1> <form name="calc"> <table> <tr> <td width="40%">Площадь помещения, м:</td> <td width="20%"><input size="5" name="room_length" onKeyPress="return KeyPress(event, 1);" onkeyup="calculate();" onfocus="show(this)"/></td> <td width="20%"><span id="result_plochad">0</span> руб.</td> </tr> <tr> <td>Периметр помещения, м (примерно равен площади):</td> <td><input size="5" name="room_width" onKeyPress="return KeyPress(event, 2);" onkeyup="calculate();" value="" onfocus="show(this)"/></td> <td><span id="result_perimetr">0</span> руб.</td> </tr> <tr> <td>Кол-во труб:</td> <td><input size="5" name="tubes_quantity" onKeyPress="return KeyPress(event, 3);" onkeyup="calculate();" value="" onfocus="show(this)"/></td><td><span id="result_tubes">0</span> руб.</td> </tr> <tr> <td>Кол-во люстр:</td> <td><input size="5" name="lightpoints_quantity" onKeyPress="return KeyPress(event, 4);" onkeyup="calculate();" value="" onfocus="show(this)"/></td><td><span id="result_lightpoints">0</span> руб.</td> </tr> <tr> <td>Кол-во светильников:</td> <td><input size="5" name="svetilnik_quantity" onKeyPress="return KeyPress(event, 5);" onkeyup="calculate();" value="" onfocus="show(this)"/></td><td><span id="result_svetilnik">0</span> руб.</td> </tr> <tr> <td>За сколько км. от Кирова Вы находитесь (районом считается расстояние свыше 20 км. от города):</td> <td><input size="5" name="doroga" onKeyPress="return KeyPress(event, 6);" onkeyup="calculate();" value="" onfocus="show(this)"/></td><td><span id="result_doroga">0</span> руб.</td> </tr> <tr style="display:none;"> <td>Кол-во углов в комнате:</td> <td><input size="5" name="angles_quantity" onKeyPress="return KeyPress(event, 7);" onkeyup="calculate();" value="4" onfocus="show(this)"/></td> </tr> <tr style="display:none;"> <td>Площадь потолка:</td> <td><span id="roof_size"></span> м<sup>2</sup></td> </tr> <tr style="display:none;"> <td>Периметр потолка:</td> <td><span id="roof_perimeter"></span> м</td> </tr> <tr> <td>ИТОГО:*</td> <td></td> <td><span id="price_new" >0</span> руб.</td> </tr> <tr id="min" style="display:none"> <td colspan="3">Минимальная сумма заказа составляет 2900 рублей.</td> </tr> </table> </form> </body> </html> |
Спасибо за такое.
Но хотелось еще небольшой алгоритм действий, что бы в дальнейшем уже самому делать :) |
Цитата:
|
Хотя, разобрался : ) спасибо большое
|
Часовой пояс GMT +3, время: 06:50. |