2016-02-24 2 views
2

У меня есть текстовое поле, и я хочу что-то случилось, каждый раз, когда пользователь в чем-то, теперь, что у меня есть следующие две строки кода, которые работают:oninput событие для JQuery экранной клавиатуры

<textarea oninput="alert('')" id="write" rows="6" cols="60"></textarea>

и

<textarea onkeyup="alert('')" id="write" rows="6" cols="60"></textarea>

Однако, это работает только с реальной клавиатуры. Когда я использую виртуальную экранную клавиатуру, предупреждение никогда не запускается.

Я создал и это JavaScript:

$(function(){ 
    var $write = $('#write'), 
     shift = false, 
     capslock = false; 

    $('#keyboard li').click(function(){ 
     var $this = $(this), 
      character = $this.html(); // If it's a lowercase letter, nothing happens to this variable 

     // Shift keys 
     if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) { 
      $('.letter').toggleClass('uppercase'); 
      $('.symbol span').toggle(); 

      shift = (shift === true) ? false : true; 
      capslock = false; 
      return false; 
     } 

     // Caps lock 
     if ($this.hasClass('capslock')) { 
      $('.letter').toggleClass('uppercase'); 
      capslock = true; 
      return false; 
     } 

     // 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(); 
     if ($this.hasClass('space')) character = ' '; 
     if ($this.hasClass('tab')) character = "\t"; 
     if ($this.hasClass('return')) character = "\n"; 

     // Uppercase letter 
     if ($this.hasClass('uppercase')) character = character.toUpperCase(); 

     // Remove shift once a key is clicked. 
     if (shift === true) { 
      $('.symbol span').toggle(); 
      if (capslock === false) $('.letter').toggleClass('uppercase'); 

      shift = false; 
     } 

     // Add the character 
     $write.html($write.html() + character); 
    }); 
}); 

Как изменить его так, экранная клавиатура будет иметь тот же эффект, как и обычный один?

ответ

2

Вы можете инициировать событие input вручную при изменении внутреннего html textarea с чем-то вроде этого.

$('textarea').trigger('input'); 

Вот обновленный JSFiddle ссылка: https://jsfiddle.net/tpztp48r/4/

+2

УДИВИТЕЛЬНЫЙ, спасибо это работает! – Tom

+2

Вы также можете вызвать его на другом месте, где вы удаляете последний символ '$ write.html (html.substr (0, html.length - 1));'. Если это то, что вы ищете, можете ли вы принять его в качестве ответа. :) – Kishor

+1

Проверьте обновленную скрипту, где я добавил функцию, которая будет обновлять HTML и запускать входное событие. https://jsfiddle.net/tpztp48r/6/ :) – Kishor