Установить фокус на элемент, который был частично визуализирован - PullRequest
Новая
       5

Установить фокус на элемент, который был частично визуализирован

4 голосов
/ 10 августа 2011

У меня есть форма с элементом ввода, которая обновляет панель, содержащую элементы формы для события blur. Я хочу, чтобы пользователь мог перемещаться с помощью клавиши tab. Таким образом, оставляя первый ввод, используя tab, следует обратить внимание на первый элемент формы отображаемой формы.

Элемент ввода с blur событием: 

<h:inputText class="text" id="profileLocation" value="#{cc.attrs.managedBean.profileLocation}">
    <f:validateRegex pattern="([A-Z]{2}[A-Z0-9])(?:\.(\d+))?(\.\d+)?(\.\d+)?" />
    <f:ajax event="blur" render="assertionLocationPanel" listener="#{cc.attrs.managedBean.updateMessageLocation}"/>
</h:inputText>

Будет отображаться assertionLocationPanel, определенный как: 

<p:outputPanel id="assertionLocationPanel">
    <h:inputText value="#{cc.attrs.managedBean.property}">
    </h:inputText>
</p:outputPanel>

При использовании клавиши tab панель обновляется, но фокус не на элементе ввода. Я думаю, это из-за рендеринга. Если панель не обновляется, фокус устанавливается на правильный элемент.

Решение

Вызовите функцию javascript, указанную в атрибуте onevent: 

<f:ajax event="blur" render="profileLocationErrorMessage assertionLocationPanel" listener="#{cc.attrs.managedBean.updateMessageLocation}" onevent="setFocus"/>

определить функцию JS как: 

<script type="text/javascript">  
    function setFocus() {
        $('#ConditionalComposite-ConditionalForm-1-ProfileLocation-segmentInstanceNumber').focus();
    }  
</script>

Мне пришлось вызывать функцию JS setFocus вместо вызова $('#ConditionalComposite-ConditionalForm-1-ProfileLocation-segmentInstanceNumber').focus(); в атрибуте onevent, потому что она не работала. Я сохранил сгенерированные идентификаторы, потому что я использую составные, также я переопределил javax.faces.SEPARATOR_CHAR в -.

Если вы используете обычный разделитель :, вы должны экранировать его как #ConditionalComposite\\:ConditionalForm1\\:ProfileLocation\\:segmentInstanceNumber.

1 Ответ

2 голосов
/ 11 августа 2011

Вы пробовали это;

Сначала дайте id для inputText под outpupanel.

<p:outputPanel id="assertionLocationPanel">
<h:inputText value="#{cc.attrs.managedBean.property}" id="assertioninput">
</h:inputText>

затем добавьте событие завершения ajax, как это, и завершите фокусировку на желаемом вводе. 

<a4j:ajax event="complete"  render="assertionLocationPanel" oncomplete="assertioninput.focus();"/>

кстати, не забудьте установить форму prependid =false для прямого вызова идентификатора inputtext

...