In a recent user support request, the user would like to see the remaining characters allowed for data input in a text input. This is not a phpGrid standard feature. How can it be achieved?
Custom event comes to rescue!
First of all, we must insert a new html node for our counter right after the text input. In our demo, we use the “status” field. The new counter will display the text of remaining allowed characters for data entry.
We bind a new “onkeyup” JavaScript event to the “status” text input. The phpGrid event you should use is “jqGridAddEditAfterShowForm” so that the counter is only displayed AFTER the form is shown.
1 2 3 4 5 6 7 8 | $afterShowForm = <<<AFTERSHOWFORM function () { $("#tr_status > td.CaptionTD + td.DataTD").append("<span id='counter'></span>"); $("#status").attr("onkeyup","updateCounter()"); } AFTERSHOWFORM; $dg->add_event('jqGridAddEditAfterShowForm', $afterShowForm); |
We use the CSS selector to style our counter. Most importantly, we make sure it is displayed in the right place (at the end of the text input box).
1 2 3 4 5 6 7 8 9 | /* move the counter atop */ #counter{ font-size: 8px; position: relative; top: -15px; float: right; padding-right: 25px; display:inline-block; } |
Lastly, insert the javascript function below that updates our counter during each key press.
1 2 3 4 5 6 7 8 | // show how much characters in "status" field input. Max is 10 function updateCounter() { var maxChar = 10; var pCount = 0; var pVal = $("#tr_status > td.CaptionTD + td.DataTD input").val(); pCount = pVal.length; $("#counter").text(pCount + '/' + maxChar); } |
Run Live Demo! (Click “Status” input box, and start typing)