Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Вызов виртуальной клавиатуры (https://javascript.ru/forum/misc/47820-vyzov-virtualnojj-klaviatury.html)

xavibeat 09.06.2014 09:29

Вызов виртуальной клавиатуры
 
Добрый день, есть сайт, на нем реализовал калькулятор (с помощью тем данного форума). Все работает, все считает отлично :).
Возникла такая необходимость:
При нажатии на поле ввода цифр необходимо, что бы появлялись цифры и пользователь мог с помощью мышки "накликать" цифры в это поле. Как такое можно реализовать? С помощью чего, направьте на истинный путь :) решения проблемы.

Код калькулятора:
<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>

рони 09.06.2014 10:58

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>

xavibeat 09.06.2014 12:16

Спасибо за такое.
Но хотелось еще небольшой алгоритм действий, что бы в дальнейшем уже самому делать :)

рони 09.06.2014 12:22

Цитата:

Сообщение от xavibeat
небольшой алгоритм действий

:-? Шо це таке?

xavibeat 09.06.2014 12:25

Хотя, разобрался : ) спасибо большое


Часовой пояс GMT +3, время: 06:50.