Обработка нажатия клавиши ENTER на K2 Smartforms

Изначально, в K2 smartforms формах нет встроенной возможности по нажатию клавиши Enter производить какое-либо событие. Например, часто встречается задача, когда пользователь вводит какое-нибудь значение в текстовой строке поиска, а дальше привычно нажимает Enter - форма должна выполнить некоторое правило (например поиска). Этого по умолчанию сделать нельзя - приходится рядом со строкой делать кнопку («Поиск»), которая срабатывает только если нажать на нее левой клавишей мыши или пальцем на сенсорном экране. Но в данном случае интуитивно напрашивается возможность выполнения действия поиска введенной в строке информации по нажатию клавиши Enter на клавиатуре.

Сделать это можно, используя JQuery.

Рассматривать будем все на примере простой формы, где есть строка ввода (на рисунке №1), кнопка «Enter» (на рисунке №2), и Data Label (на рисунке №3). При нажатии на кнопку «Enter» строка ввода «дублирует» введенные в строке данные.

Форма состоит из двух представлений: Input и Result.

На форме создаем правило переноса данных из строки ввода в Data Label (может использоваться любое правило, которое должно выполняться по нажатию кнопки).

Самое основное сосредоточено на представлении Input. Для дальнейшего рассмотрения отмечу, что поле ввода называется txt_input, а кнопка с надписью «Enter» называется btn_enter.

JavaScript добавляется как текстовое выражение, в свойство Expression объекта Data Label

Текст скрипта для рассматриваемого примера следующий:

<script type="text/javascript">$('input[name=txt_input]').keypress(function(event){ var keycode = (event.keyCode ? event.keyCode : event.which); if(keycode == '13'){ $('a[name=btn_enter]').focus(); $('a[name=btn_enter]').click();}});</script>

Важно! В данном примере событие нажатия кнопки Enter на клавиатуре обрабатывается, только когда фокус (иными словами курсор ввода) находится на поле ввода, о чем свидетельствует первое выражение в скрипте

$('input[name=txt_input]').keypress – означает, что в поле ввода с именем txt_input (именно так мы назвали поле ввода в примере) обрабатывается событие нажатие кнопок.

Далее запускается функция обработки события нажатия кнопок и главное здесь это условие, что нажата клавиша Enter (ее ASCII код - 13) if(keycode == '13')

Важно! Если не увести фокус из поля ввода «нажать» ничего не получится, поэтому для полной уверенности в результате уводим фокус собственно на кнопку «Enter» (ее имя на представлении – btn_enter) $('a[name=btn_enter]').focus()

Последнее действие выполняет метод click (нажатие) кнопки «Enter» $('a[name=btn_enter]').click()

Также, если мы хотим исполнять нажатие не зависимо от фокуса объекта, то следует использовать обработчик события $(document).keypress вместо $('input[name=txt_input]').keypress. Но делать это нужно понимая зачем нам нужно выполнять правило по кнопке не зависимо от ввода данных.

PS. СПАСИБО АНДРЕЮ РЯБЦЕВУ ЗА МАТЕРИАЛ ДЛЯ ДАННОЙ СТАТЬИ