• Faces
    September 14, 2011

Paritally restricting user entry in the ADF input text - using Java Script

Arunkumar Ramamoorthy
Consulting Technical Manager

Recently came across a forum post in which the OP wanted to let the users
edit the content of the text field partially.


Here is an example. Let us assume the input text contains the following text.
"You can edit the content inside { this }". In this, users should be able to
edit only the content inside { }. I.e Only "this" should be editable.

To achieve this, we can use a java script method, that tracks the cursor
position and ignore the user edits if the cursor position is not between the
curly braces. After which, the method would be used in the client listener for
the input text.

Example code snippet.

<af:inputText label="Partial Editable Text Item" 
id="it1" value="You can edit the content inside { this }" clientComponent="true" >
<af:clientListener type="keyPress" method="validateValue" />
<af:resource type="javascript">
function validateValue(evt){
var inputTxt=document.getElementById('it1::content');
var startPos = inputTxt.value.indexOf("{");
var endPos = inputTxt.value.indexOf("}");
var cursorPos = inputTxt.selectionStart;
if (cursorPos &lt; startPos+2 || cursorPos > endPos-1) {
alert("Cannot Edit");

More complex example by Frank Nimphius http://blogs.oracle.com/jdevotnharvest/entry/get_social_security_numbers_right

Note : Tested the above snippet successfully in Mozilla Firefox and IE 9.

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.