Force Text to UpperCase in RichInputText as the user is typing (make sure the cursor stays in one place)
The challenge is simple: users of an ADF Faces web application are only allowed to enter uppercase characters into a field. We want to help them by turning any lowercase character they type into its uppercase equivalent – as they are typing. And we of course need to make sure that this works, whether they are adding characters to the string in the input field or typing somewhere in the middle.
Our tools: clientListener for the keyUp event, JavaScript functions to determine the current caret position (position of cursor in text field) and to set the caret position in a specific field. And of course the toUpperCase() function on the JavaScript String object.
Below the very simple ADF Faces page with those three JavaScript functions that will make it happen.
<?xml version='1.0' encoding='UTF-8'?> <!DOCTYPE html> <f:view xmlns:f="http://ift.tt/1epgyuB; xmlns:af="http://ift.tt/1NviLH4; <af:document title="Form.jsf" id="d1"> <af:resource type="javascript"> /* source: http://ift.tt/297adt8 */ function getCaretPosition (oField) { // Initialize var iCaretPos = 0; // IE Support if (document.selection) { // Set focus on the element oField.focus(); // To get cursor position, get empty selection range var oSel = document.selection.createRange(); // Move selection start to 0 position oSel.moveStart('character', -oField.value.length); // The caret position is selection length iCaretPos = oSel.text.length; } // Firefox support else if (oField.selectionStart || oField.selectionStart == '0') iCaretPos = oField.selectionStart; // Return results return iCaretPos; } /* source: http://ift.tt/1n7d8BO */ function setCaretPosition(elem, caretPos) { if(elem != null) { if(elem.createTextRange) { var range = elem.createTextRange(); range.move('character', caretPos); range.select(); } else { if(elem.selectionStart) { elem.focus(); elem.setSelectionRange(caretPos, caretPos); } else elem.focus(); } } } function forceUppercase(evt) { //TODO filter on evt.getKeyCode() represents a lower case character and otherwise do nothing // extract the ADF Faces Rich Client Component - presumably a RichInputText var comp = evt.getSource(); // get the rich client component id - because from it we can derive the identitier for the DOM input element var adfComponentClientId = comp.getClientId(); // get hold of the DOM element into which the user is typing text var elem = document.getElementById(adfComponentClientId + '::content'); // find the current position of the cursor in the input element var currentCaret = getCaretPosition (elem); // turn the value in the RichInputText to Uppercase; NOTE: this will place the cursor after the last character in the field comp.setValue(comp.getSubmittedValue().toUpperCase()); // return the cursor to the position it was at setCaretPosition(elem, currentCaret); } </af:resource> <af:form id="f1"> <!-- Content --> <af:inputText label="Name" id="it21" shortDesc="Enter a value in uppercase" > <af:clientListener type="keyUp" method="forceUppercase"/> </af:inputText> </af:form> </af:document> </f:view>
The post Force Text to UpperCase in RichInputText as the user is typing (make sure the cursor stays in one place) appeared first on AMIS Oracle and Java Blog.
from AMIS Oracle and Java Blog
0 Comments