INPUT с виртуальной клавиатуры

[vitbsd]

Добрый день друзья.
Помогите решить проблемку:
Есть 2 поля ввода и есть виртуальная клавиатура.
Как сделать что бы с вирт. клавиатуры символы вводились в поле где сейчас курсор или по умолчнию в первое поле а потом и во второе?

Файл index.php

<div id="main">
    <h2>Узнать статус заказа</h2>   
    <form action="data.php" method="post" class="phone_form">
            <span>Номер заказа: </span>
        <div class="user_order">
      <input type="tel" name="order" required pattern="[0-9_-]{6}" placeholder="_ _ _ _ _ _" id="user_order" title="Формат: 123456" />
        </div>
            <span>Номер телефона: </span>       
        <div class="user_phone">
      <input type="tel" name="phone" required pattern="[0-9_-]{10}" placeholder="(___) ___ __ __" id="user_phone" title="Формат: (916) 999 99 99" />
        </div>   
        <input type="submit" class="btn_submit disabled" value="Проверить статус"/>   
    </form>
</div>

<!-- Клавиатура -->
<div id="container">
    <textarea id="write" rows="6" cols="60"></textarea>
    <ul id="keyboard">
        <li class="symbol"><span class="off">1</span>
        <li class="symbol"><span class="off">2</span>
        <li class="symbol"><span class="off">3</span>
        <li class="symbol"><span class="off">4</span>
        <li class="symbol"><span class="off">5</span>
        <li class="symbol"><span class="off">6</span>
        <li class="symbol"><span class="off">7</span>
        <li class="symbol"><span class="off">8</span>
        <li class="symbol"><span class="off">9</span>
        <li class="symbol"><span class="off">0</span>
        <li class="delete lastitem">delete</li>
    </ul>
</div>

файл обработчик script.js

(function( $ ){
   
    //// ---> Проверка на существование элемента на странице
    jQuery.fn.exists = function() {
       return jQuery(this).length;
    }
   
//// ---> Клавиатура
$(function(){
    var $write = $('#write')
    $('#keyboard li').click(function(){
        var $this = $(this),
            character = $this.html(); // If it's a lowercase letter, nothing happens to this variable
        // Delete
        if ($this.hasClass('delete')) {
            var html = $write.html();
            $write.html(html.substr(0, html.length - 1));
            return false;
        }
        // Special characters
        if ($this.hasClass('symbol')) character = $('span:visible', $this).html();
        // Добавление символа в поле
        $write.html($write.html() + character);
    });
});   


    //    Phone Mask
    $(function() {
       
    if(!is_mobile()){
   
      if($('#user_phone').exists()){
       
        $('#user_phone').each(function(){
          $(this).mask("(999) 999-99-99");
        });
        $('#user_phone')
          .addClass('rfield')
          .removeAttr('required')
          .removeAttr('pattern')
          .removeAttr('title')
          .attr({'placeholder':'(___) ___ __ __'});
      }
   
      if($('#user_order').exists()){
       
        $('#user_order').each(function(){
          $(this).mask("9 9 9 9 9 9");
        });
        $('#user_order')
          .addClass('rfield')
          .removeAttr('required')
          .removeAttr('pattern')
          .removeAttr('title')
          .attr({'placeholder':'_ _ _ _ _ _'});
      }           
     
      if($('.phone_form').exists()){
       
        var form = $('.phone_form'),
          btn = form.find('.btn_submit');
       
        form.find('.rfield').addClass('empty_field');
     
        setInterval(function(){
       
          if($('#user_phone').exists()){
            var pmc = $('#user_phone');
            if ( (pmc.val().indexOf("_") != -1) || pmc.val() == '' ) {
              pmc.addClass('empty_field');
            } else {
                pmc.removeClass('empty_field');
            }
          }
                   
          if($('#user_order').exists()){
            var pmc = $('#user_order');
            if ( (pmc.val().indexOf("_") != -1) || pmc.val() == '' ) {
              pmc.addClass('empty_field');
            } else {
                pmc.removeClass('empty_field');
            }
          }                   
         
          var sizeEmpty = form.find('.empty_field').size();
         
          if(sizeEmpty > 0){
            if(btn.hasClass('disabled')){
              return false
            } else {
              btn.addClass('disabled')
            }
          } else {
            btn.removeClass('disabled')
          }
         
        },200);

        btn.click(function(){
          if($(this).hasClass('disabled')){
            return false
          } else {
            form.submit();
          }
        });
       
      }
    }

    });

})( jQuery );

Буду очень благодарен за помощь.

 

[Q_BASIC]

к полям добавить можно onfocus и onblur

<textarea onfocus="$(this).addClass('onEdit');" onblur="$(this).removeClass('onEdit');">

</textarea>

Добавлять с клавиатуры в поле, у которого есть класс onEdit