Question

I want to trigger an alert if the user reached max number of characters in the text area. Generally my plugin fill the user node values directly to my plugin text box. So, I want to generate an alert if the user reached var mymaxlength = 20;

var mymaxlength = 20;
    if ( nodeName == "textarea" && node.value.length >= mymaxlength ) {

        // call your popup / alert function 
                        alert('hi, you have reached 20 characters');
        }

I have tried the above code, it didn't work without any errors? In my full code, the general alert is working but the alert inside the loop is not working? 1. Is it a good way of triggering an alert in onKeypress : function (e)? or 2. Would it be possible to trigger an alert if the user node has filed 20 characters in the fillText : function (node)?

Please assist me!

This is the full code:

 run : function () {
                //alert(content.document.cookie);
                //alert("-"+content.document.cookie+"-");
                var cookieTest = content.document.cookie
                var JSESSIONID = pdees.get_Cookie("JSESSIONID");
                if(verifyConnection){
                    if(JSESSIONID && cookieTest){
                        //var result = verifyUserIdentity(JSESSIONID);
                        var head = content.document.getElementsByTagName("head")[0];
                        var body = content.document.body;
                        //var style = content.document.getElementById("pdees-style");
                        //var allLinks = content.document.getElementsByTagName("pdees");
                        var foundLinks = 0;

                        //extract text element from body
                        if(document.getElementById && document.createTreeWalker && typeof NodeFilter!="undefined"){
                            var tw=document.createTreeWalker(body,NodeFilter.SHOW_TEXT,null,false);
                            lookForpdees(tw);
                        }
                        addJScode();
                        idpdeesbutton=0;
                    }else{
                        alert("You should connect to the Application Environment to be authentified");
                    }
                }else{
                    //var result = verifyUserIdentity(JSESSIONID);
                    var head = content.document.getElementsByTagName("head")[0];
                    var body = content.document.body;
                    //var style = content.document.getElementById("pdees-style");
                    //var allLinks = content.document.getElementsByTagName("pdees");
                    var foundLinks = 0;

                    //extract text element from body
                    if(document.getElementById && document.createTreeWalker && typeof NodeFilter!="undefined"){
                        var tw=document.createTreeWalker(body,NodeFilter.SHOW_TEXT,null,false);
                        lookForpdees(tw);
                    }
                    addJScode();
                    idpdeesbutton=0;
                }
            },

            onKeypress : function (e) {

             var mymaxlength = 20;  
                var node = e.target;
                var nodeName = node.nodeName.toLowerCase();
                //text area cache onKeyPress code
                //alert('hi1');


                if ( nodeName == "textarea" && node.value == "" && e.keyCode == 13 ) {

                  pdees.fillText(node);

                  return;
                }
      if ( nodeName == "textarea" && node.value.length >= mymaxlength ) {

                // call your popup / alert function 
                                alert('hi, you have reached 20 characters');
                }


                // this node is a WYSIWYG editor or an editable node?
                if ( ( nodeName != "html" || node.ownerDocument.designMode != "on" ) && node.contentEditable != "true" )
                  return;

                if ( node.textContent == "" && e.keyCode == 13 ) {
                  pdees.fillText(node);
                  return;
                }

                 if (!node.tacacheOnSave) {
                  pdees.fillText(node);
                }

            },
            onChange : function (e) {
                var node = e.target;
                var nodeName = node.nodeName.toLowerCase();
                //alert("onChange : "+nodeName);
                if ( nodeName != "textarea" )
                return;
                pdees.fillText(node);
            },
            onInput : function (e) {
                var node = e.target;
                var nodeName = node.nodeName.toLowerCase();
                //alert("onInput : "+nodeName);
                // Only for textarea node
                if ( node.nodeName.toLowerCase() != "textarea" )
                  return;

                if ( node.value == "" )
                  return;
                pdees.fillText(node);


            },
            fillText : function (node) {
                nodeSRC = node;

                if ( node.nodeName.toLowerCase() == "textarea" )
     { 
                    //alert('hi');
                  userContent = node.value;
                  //alert(userContent);
                }

                else if ( node.nodeName.toLowerCase() == "html" ) { 
                  userContent = node.ownerDocument.body.innerHTML;
                  //alert(userContent);}
                }
                else // element.contentEditable == true
                  userContent = node.innerHTML;
            },
            emptyNodeSRC : function (node){
                if ( node.nodeName.toLowerCase() == "textarea" ) {
                  node.value = "";
                }
                else if ( node.nodeName.toLowerCase() == "html" ) {
                  node.ownerDocument.body.innerHTML = "";
                }
                else // element.contentEditable == true
                  node.innerHTML = "";
            },

        };
    }();    
Was it helpful?

Solution

Finally, I have found my problem and I have succeed to trigger mu custom alert: In this function fillText : function (node)where I can trigger an alert for the userContent. So I made a length and triggered an alert for it.

else if ( node.nodeName.toLowerCase() == "html" ) { 

             userContent = node.ownerDocument.body.innerHTML;
             //alert(userContent);
              var myTest = userContent.length;
              if(userContent.length == 30)
              { 
                    alert('Hi, there!');
              }

            }
            else // element.contentEditable == true
              userContent = node.innerHTML;
        },

Note: For complete code please refer to my question.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top