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

Тема в разделе "JavaScript", создана пользователем vitbsd, 25 ноя 2014.

Модераторы: ZiX
  1. vitbsd

    vitbsd Постоялец

    Регистр.:
    26 ноя 2009
    Сообщения:
    111
    Симпатии:
    76
    Добрый день друзья.
    Помогите решить проблемку:
    Есть 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 );
    Буду очень благодарен за помощь.
     
  2. Q_BASIC

    Q_BASIC

    Регистр.:
    30 ноя 2013
    Сообщения:
    403
    Симпатии:
    274
    к полям добавить можно onfocus и onblur
    HTML:
    <textarea onfocus="$(this).addClass('onEdit');" onblur="$(this).removeClass('onEdit');">
    
    </textarea>
    Добавлять с клавиатуры в поле, у которого есть класс onEdit
     
    Последнее редактирование: 30 ноя 2014
    vitbsd нравится это.