Where does onPaste attribute of a textarea goes when JSF generates HTML code?

Question

I have this inside a JSF page,

<textarea id="textarea" rows="4" cols="50"
                    onKeyPress="validate(event)" onPaste="validatepaste(event)"></textarea>

The reason I am not using <h:inputTextarea> is because onPaste attribute seems to be missing with this JSF tag.

When I debug my code in Google Chrome, I am surprised to find onPaste attribute is not there, The rendered html code is,

<textarea id="j_id_2:textarea" name="j_id_2:textarea" 
      onkeypress="return validate(event)" cols="15" rows="5"></textarea>

Since JSF is nothing but a HTML code generator, I failed to understand what it does to onPaste attribute and why is it not supported?

Secondly. how will i achieve value binding on this html textarea?

EDIT: Since onkeyup is supported and is standardised Why does then onkeyup functionality breaks when working with <hinputTextarea>?

I am not able to achieve the same thing which I am with html textarea field.

The following function prevents alphabatical text to be replaced by "" as soon as the user enters manually by keyboard input or by copy pasting. Here's the snippet:

function validate(e) {
    console.log(e)
    var invalidcharacters = /[^0-9]/gi
    var phn = document.getElementById('textarea');
    if (invalidcharacters.test(phn.value)) {
        //e.value = e.value.replace(invalidcharacters, "");
        console.log("REPLACING");
        newstring = phn.value.replace(invalidcharacters, "");
        phn.value = newstring
    }
}

It works fine with normal html as shown below. Here the jsfiddle

<textarea id="textarea" rows="4" cols="50" onkeyup="validate(event)"></textarea>

The same functionality is not achievable with

<h:inputTextarea value="#{myBean.myValue}" id="compTextArea" 
onkeyup="validate(event)"></hinputTextarea>

and replacing this line var phn = document.getElementById('textarea'); with document.getElementById('compTextArea'); in the js file method.

Anyreasons why this seems strange?

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

2

<textarea ... onKeyPress="..." onPaste="...">

First of all, JSF uses Facelets as view technology. Facelets uses XHTML+XML to generate HTML. Camelcased attributes are invalid in XHTML. It's onkeypress and onpaste respectively. Perhaps the source where you got this information from was confusing it with "onPaste" DOM event handler.

<textarea ... onkeypress="..." onpaste="...">

Second, onpaste property is not part of any standard specification. See also HTMLElement.onpaste documentation on MDN. JSF is not designed to produce non-standard compliant code and therefore it's not available as attribute of standard <h:inputTextarea> component (yet — it may come in a future JSF version once it becomes part of DOM standard).

You can however achieve it anyway using new JSF 2.2 "HTML5 friendly markup" feature: passthrough attributes.

<html ... xmlns:a="http://xmlns.jcp.org/jsf/passthrough">
...
<h:inputTextarea ... a:onpaste="..." />

Do note that since onpaste is not part of any current standard, its functionality depends on the webbrowser make/version used. Your Chrome version apparently doesn't support it and therefore it's invisible in its DOM inspector (but it's still visible in raw HTML source as you can see by rightclick, View Source or pressing Ctrl+U).

Thank you very very much for answering you. I upvoted you. But I see something strange with onkeyup event. Kindly see edited portion. – Farhan stands with Palestine May 14 '15 at 10:08
1

JavaScript as being a client side language doesn't work directly with JSF source code as it is in server side. JavaScript works with JSF-generated HTML output as it is in client side. The `document.getElementById('textarea');` does not return an existing element in HTML DOM tree. You should have seen an error in JS console. Check the generated HTML output for the actual element ID. This is a different problem. See also a.o. http://stackoverflow.com/questions/6045307 Check particularly the `this` suggestion so that you don't need `getElementById()` at all. – BalusC May 14 '15 at 10:10
You are indeed amazing in your skillset. Believe me I have gone through each and every material on the web regarding your life. What you are suffering from and the ANSI DOS Batch program to select DOS games...I enjoyed everything but one thing one disturbs me constantly at times about you is regarding your belief in Athesim. It really hits me hard everytime I saw your name flashing over the web. – Farhan stands with Palestine May 14 '15 at 10:23
You're welcome. I indeed only believe in experiences and facts. That's also why my answers are so good (as they are based on them). I do however fully respect other religions. People just need to have a community to drain power from. – BalusC May 14 '15 at 10:27

Where does onPaste attribute of a textarea goes when JSF generates HTML code?

1 Answers1

See also: