2

I am in need for a valueChange event, that triggers every time a visible character is added or removed.

I've got 2 inputText-fields, one of which is read only and a commandButton.

<div>
  <p:inputText>
    <p:ajax id="encodedString" event="valueChange"/>
  </p:inputText>

  <p:commandButton action="#{bean.foo}" update="output"/>

  <p:inputText id="output" readonly="true">
  </p:inputText>
</div>

Now, the users enters some encoded string in the first field and presses the button, which then decodes the string and presents it in human readable form in the read-only input field. Now, whenever the user manipulates the original string, the output should be reset since it does not represent the original encoded string anymore.

Sadly, the valueChange event only triggers when the input field loses focus. I have tried the keypress event, but it also triggers when buttons like the arrow keys are pressed.

JavaScript is viable for me, but should be omitted if possible.

What is the best way to trigger the valueChange event (or a similar event) whenever the actual input changes? I.e. when a visible character is added or removed.

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
Martin WasGehtSieDasAn
  • 309
  • 2
  • 12
  • JSF typically uses the default JavaScript events to trigger AJAX. I don't know about a javascript event that is triggered every time the text field content ist altered. I think a bit of javascript will be necessary. – Selaron Dec 13 '19 at 08:16
  • i feel like this comment is not that helpful to this post but i also dont want to ignore it. thanks for caring for my question :) – Martin WasGehtSieDasAn Dec 13 '19 at 09:02
  • 1
    Javascript's [`input`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) event should suit your needs. – Microloft Dec 13 '19 at 16:18
  • 2
    inputText has a keydown event too, use that one dude – BugsForBreakfast Dec 13 '19 at 16:24
  • your question at the end is answered: just use keydown event to make sure it always gets the changes on the inputtext – BugsForBreakfast Dec 13 '19 at 16:44
  • @bugsforbreakfast: 'dude' is not the best word to use. You can even just leave it out – Kukeltje Dec 15 '19 at 16:53

2 Answers2

2

You essentially need the HTML DOM input event. This relatively new event is unfortunately not supported in <p:ajax> of <p:inputText> because the oninput attribute is not supported in <p:inputText> (yet?).

However, you can make use of JSF 2.2's passthrough attributes feature to force JSF to render an oninput attribute anyway where you in turn explicitly trigger the default onchange() function.

<... xmlns:a="http://xmlns.jcp.org/jsf/passthrough">

<p:inputText value="#{bean.value}" a:oninput="onchange()">
    <p:ajax listener="#{bean.listener}" />
</p:inputText>

True, that involves JavaScript but it's really only a small bit.

Note that I removed event="valueChange" from <p:ajax> because that's the default one already.

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
-3

value changed event not supported for inputText you have to use keyup or blur 

<p:inputText>
    <p:ajax id="encodedString" event="keyup"/>
  </p:inputText>
Amro Nahas
  • 44
  • 4