Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.09.2011, 14:41
Аспирант
Отправить личное сообщение для virus-07 Посмотреть профиль Найти все сообщения от virus-07
 
Регистрация: 16.12.2010
Сообщений: 41

Переход между textarea с помощью клав-ры
собственно, есть таблица из N блоков textarea. Можно ли переводить каретку от одной области к другой с помощью, например, клавиш num-блока? Или сочетания клавиш... Или только табуляцией?
Ответить с цитированием
  #2 (permalink)  
Старый 14.09.2011, 23:36
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

написал маленький скриптик

есть 2 версии : исходник и очень сильно ужатая (GCC, advanced mode).

строка в конце "_keyNav" - имя глобальной переменной, которую можно будет использовать для создания навигации

если хотите, можно её изменить на "mySuperNav" или что-то в этом духе.

маленькая документация :

конструктор принимает три аргумента
new _keyNav( options, elements [, onmove] );

где options - объект-хеш, содержащий настройки
квадратные скобки показывают необязательные аргументы.

пример:
Цитата:
{
rows: кол-во строк.,
cols: кол-во столбцов,
current: [ текущ. строка, текущ. столбец ]
}
далее, elements. это - коллекция элементов. см. пример

функция onmove будет срабатывать при каждом изменении "активного" элемента (вызов функции moveTo )

в функцию-обработчик псевдособытия передаются 2 аргумента :
первый : с чего перешли, второй : на что перешли.
Цитата:
function my_onmove ( старый элемент, текущий элемент ){};
обработчик сохраняется в свойстве onmove, т.е. его можно менять на другой, если будет необходимо.

....
далее.

у экземпляра (читай: навигации) есть 2 метода : move и moveTo

moveTo просто изменяет внутренний указатель и порождает псевдособытие move (типа низкоуровневая функция)

принимает 1 аргумент - массив с указателем

Цитата:
myNavObj.moveTo( [ строка , столбец ] );
..

функция move принимает один аргумент - строку, содержащую направление сдвига указателя.

возможные значение : "up","down","left","right". смещения указателя соотв. значениям слов.
порождает псевдособытие move

...............................................

всё


выкладываю пример : jsfiddle

и тут

<script type="text/javascript">
(function(l){function g(a,b,c){var d=this[j]=[],e,g=a.rows,k=0,h,i=a.cols;for(e=0;e<g;e++){d[e]=[];for(h=0;h<i;k++,h++){if(!b[k])break;d[e][h]=b[k]}}this[f]=~this.toString.call(a[f]).indexOf("Array")?a[f]:[0,0];this.onmove=typeof c=="function"?c:function(){}}var f="current",j="elementsMatrix",i=g.prototype={};i.moveTo=function(a){var b=this[j];this.onmove.call(this,b[this[f][0]][this[f][1]],b[(this[f]=a)[0]][a[1]])};i.move=function(a){var b=this[j],c=[this[f][0],this[f][1]],d=a=="up"?-1:a=="down"?
1:0,e=a=="left"?-1:a=="right"?1:0;b[c[0]+d]||(d=0);b[c[0]+d][c[1]+e]||(d=a=="left"?-1:1,e=b[c[0]+d]?(a=="left"?1:-1)*(b[0].length-1):d=0);this.moveTo([c[0]+d,c[1]+e])};window[l]=function(a,b,c){return new g(a,b,c)}})("_keyNav");

</script>

<textarea cols="3" rows="3"> </textarea>
<textarea cols="3" rows="3"> </textarea>
<textarea cols="3" rows="3"> </textarea>
<br>
<textarea cols="3" rows="3"> </textarea>
<textarea cols="3" rows="3"> </textarea>
<textarea cols="3" rows="3"> </textarea>

<script type="text/javascript">
var o = { rows:2,cols:3, current : [0,0] }, 
    elems = document.getElementsByTagName("textarea"),
    onmove =  function(oldEl, newEl){ newEl.focus() }
    
var nav = new _keyNav( o, elems, onmove );

console.log(nav)
    
document.body.onkeydown = function(e){ 
     if(!e || !e.keyCode) e=event;
     
     switch( e.keyCode||e.which ){ 
          case 37 : nav.move("left"); break;
          case 38 : nav.move("up"); break;
          case 39 : nav.move("right"); break;
          case 40 : nav.move("down");
     }
     return false; 
};
</script>

Последний раз редактировалось melky, 14.09.2011 в 23:38.
Ответить с цитированием
  #3 (permalink)  
Старый 15.09.2011, 14:35
Аспирант
Отправить личное сообщение для virus-07 Посмотреть профиль Найти все сообщения от virus-07
 
Регистрация: 16.12.2010
Сообщений: 41

Ух, буду разбираться. Сильно... Спасибо большое.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как отловить для всего документа переход фокуса между элементами. Nominus umbra Общие вопросы Javascript 2 28.04.2010 01:33
Проверка наличия логина в БД при регистрации, с помощью ajax storng Общие вопросы Javascript 4 09.04.2010 19:24
Переход между окнами ввода при заполнении. Бушка Общие вопросы Javascript 4 25.03.2009 14:40