Implementing Character Limit Feature for TextArea Element in a BSP with JavaScript

Here is a good example of using JavaScript in WebUI BSPs. In this example, we will try to implement character limit functionality for a TextArea field in a bsp.

First of all, we need to ID property of Html Element of the Text Field. To get that, we could use below code in .htm.

DATA lv_textArea_id TYPE string.
CONCATENATE controller->component_id '_search_message' INTO lv_textArea_id.

The "search" phrase, in concatenate action, is the name of the context node of the property that generates the text area field. And the "message" phrase is the name of the property in the "SEARCH" context node.

We need a custom html element to display the remaining character count.

<div>
    <span id="charCount"></span>
    <span>&nbsp;characters left</span>
</div>

It is proper to place this right under the text area element.

Below javascript code should be replaced into .htm file.

<script type="text/javascript">
    var field = document.getElementById("<&= lv_textArea_Id %>") //here we use the id property of text area element
    var charCount = document.getElementById("charCount"); //the html element we will show the remaining characters count
    var charLimit = 320; //character limit
    
    charCount.innerHtml = charLimit;

    //the function that calculates character count
    var func = function(e){
                 if(this.value.length > charLimit){
                     field.value = field.value.substring(0, charLimit);
                 }
                 charCount.innerHtml = charLimit - (this.value.length);
               };

    //check changes applied to the text area every 0.5 secs to update charCount
    setInterval(func, 500);

    //bind keydown and keyup events of text area to above function
    field.addEventListener("keydown", func, false);
    field.addEventListener("keyup", func, false);

</script>

Finally,

 

ABOUT Volkan Kahyaoğlu

SAP CRM/ABAP Consultant. Worked on Web and Mobile Development by using ASP.NET MVC, Html, jQuery, Ajax, CSS and Android.

RELATED POSTS

COMMENTS

comments powered by Disqus