使用Javascript XUL触发FF文本框中的按键计数器的自定义警报

Question

This is my alert function to show the alert message:

function alertPopup() {
  var image = "file://C:/stat.png";
  var win = Components.classes['@mozilla.org/embedcomp/window-watcher;1'].
                      getService(Components.interfaces.nsIWindowWatcher).
                      openWindow(null, 'chrome://global/content/alerts/alert.xul',
                                  '_blank', 'chrome,titlebar=no,popup=yes', null);
  win.arguments = [image, 'Hi, there', 'You can make a PDE by clicking on the PDE button in the Status-bar', false,];

document.getElementById('myImage').setAttribute("hidden", "false");

}

This funciton to to get the entered text in the Firefox browser and paste in the textbox plugin.

onKeypress : function (e) {
          var node = e.target;
          var nodeName = node.nodeName.toLowerCase();
          //text area cache onKeyPress code
          if ( nodeName == "textarea" && node.value == "" && e.keyCode == 13 ) {
            pde.fillText(node);
            return;
          }
          // 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 ) {
            pde.fillText(node);
            return;
          }

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

       },
       onChange : function (e) {
          var node = e.target;
          var nodeName = node.nodeName.toLowerCase();
          //alert("onChange : "+nodeName);
          if ( nodeName != "textarea" )
            return;
          pde.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;
          pde.fillText(node);
       },
       fillText : function (node) {
          nodeSRC = node;
          if ( node.nodeName.toLowerCase() == "textarea" ) { 
            userContent = node.value;
          }
          else if ( node.nodeName.toLowerCase() == "html" ) { 
            userContent = node.ownerDocument.body.innerHTML;
          }
          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 = "";
       },

maxTextEntered : 20; I want to add this parameter to my above code.

How do i trigger the pop-up function if the user typed more than 20 characetrs in the FF browser textbox in my code and I would like to reset the time after 5 mins and the start the counting once again?

https://developer.mozilla.org/en/NsIAlertsService https://developer.mozilla.org/en/Code_snippets/Alerts_and_Notifications from these links, I couldn't find any script for my requirement.

Please propose me good solution to my problem. Thanks guys.

Answer 1

After 5 days, I have a solution for my problem.

The actual code buffers the userContent (ie when ever if the user types something in FF browser text-box or text area) everything will be put in the buffer memory & this will be stored until the user closes the present text-area or text-box. If the user opens up a new text-box or a new text-area & types something the new userContent will be stored in the buffer memeory(the old buffer will be deleted).

The idea is very simple for my problem(which i couldn't think deep in the beginning):

The function onKeypress function:

 if ( ( nodeName != "html" || node.ownerDocument.designMode != "on" ) && node.contentEditable != "true" ) // this tells it's a html text-box area//
              return;

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

This tells the browser to detect the user is typing something and pass it to the fillText(node). This call my other function fillText : function (node) to fill the values(texts) .

To check value length of the userContent variabel to trigger my alert if the user reached the assigned number value.

     else if ( node.nodeName.toLowerCase() == "html" ) // his tells it's a html text-box area of any website in FF browser//
               { 
             userContent = node.ownerDocument.body.innerHTML;
              var myTest = userContent.length;
                if(userContent.length == 20)
              { 
                alertPopup(); //calling my custom alert function.
              }

function alertPopup() {
  var image = "chrome://PDE/skin/build.png";
  var win = Components.classes['@mozilla.org/embedcomp/window-watcher;1'].
                      getService(Components.interfaces.nsIWindowWatcher).
                      openWindow(null, 'chrome://global/content/alerts/alert.xul',
                                  '_blank', 'chrome,titlebar=no,popup=yes', null);
  win.arguments = [image, 'Hi, there', 'You can make a PDE by clicking on the PDE button on the tool-bar', false];

//document.getElementById('myImage').setAttribute("hidden", "false");
} 

Here is the full code:

onKeypress : function (e) {


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


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

              pde.fillText(node);

              return;
            }


            // 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 ) {
              pde.fillText(node);
              return;
            }

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

        },


        fillText : function (node) {
                // declare tmpNodeVal OUTSIDE the function
            nodeSRC = node;
            var tmpNodeVal = "";

            if ( node.nodeName.toLowerCase() == "textarea" ) { 
              userContent = node.value;

            }

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

             userContent = node.ownerDocument.body.innerHTML;
             //alert(userContent);
              var myTest = userContent.length;
              if(userContent.length == 50)
              { 
                alertPopup();//calling my custom alert function.
              }
              else if(userContent.length == 200)
              {
                PopupNotifications.show(gBrowser.selectedBrowser, "PDES-popup",
        "Hi, there!, You have reached more than the max level !",
        "pde-toolbar-button", /* anchor ID */
        {
          label: "Build PDES",
          accessKey: "D",

          callback: function() {
                        if(nodeSRC!=null) pde.emptyNodeSRC(nodeSRC);

             window.openDialog("chrome://hello/content/hellouilder.xul", "hello", "chrome,width=400,height=360",userContent, nodeSRC);

          }
        },null, { timeout:1000});
              }

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

Note: 1. The above code covers the functionality of KeyPress counter and trigger an alert. With the above code, we can trigger an alert for the "Subject" area in Gmail or Yahoo websites during email writting process. 1. The above code covers the functionality of KeyPress counter and trigger an alert. With the above code, we can trigger an alert for the "Subject" area in Gmail or Yahoo websites during email writting process.