Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Навигация по INPUTam 
:(
    Опции темы
xoslv
Дата 14.3.2008, 14:33 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 195
Регистрация: 12.1.2007

Репутация: нет
Всего: нет
Ув. програмисты!
Столкнулся с проблемой навигации по <input type="text" ***>
Очень нужно реализовать возможность навигации по инпутам с помощью стрелочек.
вот моя HTML разметка:
Код

<tr>
    <td width="310">
        <input type="hidden" name="asort_id_2" value="3">
    <input type="hidden" name="price_2" value="0.15">
    </td>
    <td>
        &&</td>
    <td>
        <input type="text" name="leg_2" value="" class="text_in" style="width:75px;"></td>
    <td>
        <input type="text" name="illeg_2" value="" class="text_in" style="width:75px;"></td>
    <td>
        <input type="text" name="exch_2" value="" class="text_in" style="width:75px;"></td>
    <td>
        <input type="text" name="inc_2" value="" class="text_in" style="width:75px;"></td>
    </tr>
<tr>
    <td width="310">
        <input type="hidden" name="asort_id_3" value="4">
    <input type="hidden" name="price_3" value="0.093">
    </td>
    <td>
        &&</td>
    <td>
        <input type="text" name="leg_3" value="" class="text_in" style="width:75px;"></td>
    <td>
        <input type="text" name="illeg_3" value="" class="text_in" style="width:75px;"></td>
    <td>
        <input type="text" name="exch_3" value="" class="text_in" style="width:75px;"></td>
    <td>
        <input type="text" name="inc_3" value="" class="text_in" style="width:75px;"></td>
    </tr>
<tr>
    <td width="310">
        <input type="hidden" name="asort_id_4" value="5">
    <input type="hidden" name="price_4" value="4.8">
    </td>
    <td>
        &&</td>
    <td>
        <input type="text" name="leg_4" value="" class="text_in" style="width:75px;"></td>
    <td>
        <input type="text" name="illeg_4" value="" class="text_in" style="width:75px;"></td>
    <td>
        <input type="text" name="exch_4" value="" class="text_in" style="width:75px;"></td>
    <td>
        <input type="text" name="inc_4" value="" class="text_in" style="width:75px;"></td>
    </tr>

и по такой сетке мне нужна возможность передвижение стрелочками как вверх - вниз так и влево - право!
Помогите с примером! Огромнейшая просьба!
Зарание спасибо!
--------------------
Не всё то маздай, что синее!
PM MAIL ICQ   Вверх
xoslv
Дата 14.3.2008, 15:12 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 195
Регистрация: 12.1.2007

Репутация: нет
Всего: нет
Люди, помогите плииззз , хотябы подскажите в каком направлении искать?
--------------------
Не всё то маздай, что синее!
PM MAIL ICQ   Вверх
dsCode
Дата 14.3.2008, 15:25 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 565
Регистрация: 8.9.2007
Где: Saint-Petersburg

Репутация: 19
Всего: 26
xoslv,

- ловите keyCode (влево - 37, вверх - 38, вправо - 39, вниз - 40) в событии onkeydown на input'ах.
- в соответствии со нужным кодом, выделяйте нужный инпут (метод focus())


--------------------
the .code inside
:my music
PM MAIL WWW ICQ Jabber   Вверх
xoslv
Дата 14.3.2008, 16:53 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 195
Регистрация: 12.1.2007

Репутация: нет
Всего: нет
Вот это ты здорово объяснил, особенно для того, кто в этом не сечёт... :(
А какой-нибудь простенький примерчик можно?
Буду весьма и весьма признателен!
--------------------
Не всё то маздай, что синее!
PM MAIL ICQ   Вверх
dsCode
Дата 14.3.2008, 17:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 565
Регистрация: 8.9.2007
Где: Saint-Petersburg

Репутация: 19
Всего: 26
Код

<input type="text" id="test" /><br />
<input type="text" id="test2" />


Код

document.getElementById('test').onkeydown = function(e) {

  e = e || window.event;

  // коды клавиш
  
  var LEFT_ARROW = 37;
  var UP_ARROW = 38;
  var RIGHT_ARROW = 39;
  var DOWN_ARROW = 40;

  e.keyCode == DOWN_ARROW && document.getElementById('test2').focus();
  
  // и т.д.

}



--------------------
the .code inside
:my music
PM MAIL WWW ICQ Jabber   Вверх
ksnk
Дата 14.3.2008, 17:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386
Интересно, а как отличить движение вправо-влево - движение по самому input'у или движение по сетке


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
dsCode
Дата 14.3.2008, 17:53 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 565
Регистрация: 8.9.2007
Где: Saint-Petersburg

Репутация: 19
Всего: 26
Цитата(ksnk @  14.3.2008,  17:43 Найти цитируемый пост)
Интересно, а как отличить движение вправо-влево - движение по самому input'у или движение по сетке

 smile действительно =)) но это - к автору таска, который вероятно пишет что-то вроде Экселевской таблицы ) Отличить в этом случае можно, если будет ограничение длины ввода и, когда курсор стоит в позиции максимальной длины - следующее "вправо" перепрыгнет на следующий инпут

Это сообщение отредактировал(а) dsCode - 14.3.2008, 17:54


--------------------
the .code inside
:my music
PM MAIL WWW ICQ Jabber   Вверх
xoslv
Дата 14.3.2008, 17:55 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 195
Регистрация: 12.1.2007

Репутация: нет
Всего: нет
а если инпут пустой ? smile
--------------------
Не всё то маздай, что синее!
PM MAIL ICQ   Вверх
dsCode
Дата 14.3.2008, 18:04 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 565
Регистрация: 8.9.2007
Где: Saint-Petersburg

Репутация: 19
Всего: 26
Цитата(xoslv @  14.3.2008,  17:55 Найти цитируемый пост)
а если инпут пустой ?

и чего?  smile откуда я знаю, что Вы хотите делать, "если инпут пустой"? =))) Если в этом случае нужно перейти на следующий инпут - то проверьте, что value.length == 0 и переходите (пример выше). 

Это сообщение отредактировал(а) dsCode - 14.3.2008, 18:06


--------------------
the .code inside
:my music
PM MAIL WWW ICQ Jabber   Вверх
xoslv
Дата 14.3.2008, 18:11 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 195
Регистрация: 12.1.2007

Репутация: нет
Всего: нет
ну вот исходя из той разметки, что я  показал, что мне надо туда добавить и что убрать?
И если ID инпута увеличивать на один, то строкой ниже ИД будет больше на 4, если выше, значит меньше, а если это первая строка или последняя?  Вот я человек, который не пишет на JavaScript'e и для меня это потёмки, мне надо в ПХП движок вставить шаблон с таким скриптом. Вот и возник вопрос, как написать такой скрипт. Ещо одна беда - это отсутствие времени на многочасовое  тестирование...

Зарание огромное спасибо!
--------------------
Не всё то маздай, что синее!
PM MAIL ICQ   Вверх
Sardar
Дата 14.3.2008, 18:42 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317
Оберни input'ы в label, задай аттрибут tabindex, по привычной кнопке Tab можно будет иди вперёд (shift+Tab назад).


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
ksnk
Дата 14.3.2008, 18:44 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386
Вот... правда писано на коленке и толком неоптимизировано... Да и Опера уродка опять кочевряжется... smile А так - работает...
Код

<head>
<script type='text/javascript'>

function setup(){
    var tab = document.getElementsByTagName('table')[0];
    tab.onkeydown=keyHandler;

    var LEFT_ARROW = 37;
    var UP_ARROW = 38;
    var RIGHT_ARROW = 39;
    var DOWN_ARROW = 40;


    function clearEv(e){
        if (e.preventDefault) e.preventDefault()
        e.cancelBubble = true;
        if(e.stopPropagation) e.stopPropagation();
        return (e.returnValue = false);
    }
    
    function isNot(o,tag){
        return o && (!o.tagName || o.tagName.toLowerCase()!=tag);
    }
    
    function keyHandler(e) {
    
        e = e || window.event;
        for (var o= e.target || e.srcElement;isNot(o,'input');o = o.parentNode ) {}
    
        if (e.keyCode == LEFT_ARROW ||e.keyCode == RIGHT_ARROW) {
            var func=e.keyCode == LEFT_ARROW?'previousSibling':'nextSibling';
            while (isNot(o,'td')) o=o.parentNode ;
            do{ o=o[func] } while (isNot(o,'td')); 
            if(o)o=o.getElementsByTagName('input')[0];
            if(o){o.focus();return clearEv(e);}
        } else if (e.keyCode == UP_ARROW || e.keyCode == DOWN_ARROW) {
            var x = o, func=e.keyCode == UP_ARROW?'previousSibling':'nextSibling';
            while (isNot(o,'tr')) o=o.parentNode ;
            var oo=o.getElementsByTagName('input');
            for(var i=0;i<oo.length;i++) if(oo[i]==x) break;
            do{ o=o[func] } while (isNot(o,'tr')); 
            if(o)o=o.getElementsByTagName('input')[i];
            if(o){o.focus();return clearEv(e);}
        } 
    }
}

</script>
</head>
<body onload='setup();'>
<table>
<tr>
    <td width="310">
        <input type="hidden" name="asort_id_2" value="3">
    <input type="hidden" name="price_2" value="0.15">
    </td>
    <td>
        &&</td>
    <td>
        <input type="text" name="leg_2" value="" class="text_in" style="width:75px;"></td>
    <td>
        <input type="text" name="illeg_2" value="" class="text_in" style="width:75px;"></td>
    <td>
        <input type="text" name="exch_2" value="" class="text_in" style="width:75px;"></td>
    <td>
        <input type="text" name="inc_2" value="" class="text_in" style="width:75px;"></td>
    </tr>
<tr>
    <td width="310">
        <input type="hidden" name="asort_id_3" value="4">
    <input type="hidden" name="price_3" value="0.093">
    </td>
    <td>
        &&</td>
    <td>
        <input type="text" name="leg_3" value="" class="text_in" style="width:75px;"></td>
    <td>
        <input type="text" name="illeg_3" value="" class="text_in" style="width:75px;"></td>
    <td>
        <input type="text" name="exch_3" value="" class="text_in" style="width:75px;"></td>
    <td>
        <input type="text" name="inc_3" value="" class="text_in" style="width:75px;"></td>
    </tr>
<tr>
    <td width="310">
        <input type="hidden" name="asort_id_4" value="5">
    <input type="hidden" name="price_4" value="4.8">
    </td>
    <td>
        &&</td>
    <td>
        <input type="text" name="leg_4" value="" class="text_in" style="width:75px;"></td>
    <td>
        <input type="text" name="illeg_4" value="" class="text_in" style="width:75px;"></td>
    <td>
        <input type="text" name="exch_4" value="" class="text_in" style="width:75px;"></td>
    <td>
        <input type="text" name="inc_4" value="" class="text_in" style="width:75px;"></td>
    </tr>
</table>
</body>



--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
xoslv
Дата 14.3.2008, 19:16 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 195
Регистрация: 12.1.2007

Репутация: нет
Всего: нет
Огромное спасибо! Если что, попитаюсь оптимизнуть!  smile 
--------------------
Не всё то маздай, что синее!
PM MAIL ICQ   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0593 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.