Вызов пользовательского оповещения для счетчика нажатий клавиш в текстовом поле FF с использованием Javascript XUL

Question

Это моя функция оповещения для отображения сообщения оповещения:

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");

}

Эта функция предназначена для получения введенного текста в браузере Firefox и вставки в текстовое поле плагина.

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; Я хочу добавить этот параметр в мой код выше.

Как мне вызвать всплывающую функцию, если пользователь набрал более 20 символов в текстовом поле браузера FF в моем коде, и я хотел бы сбросить время через 5 минут и снова начать подсчет?

https://developer.mozilla.org/en/NsIAlertsService https://developer.mozilla.org/en/Code_snippets/Alerts_and_Notifications по этим ссылкам я не смог найти скрипт для своего требования.

Пожалуйста, предложите мне хорошее решение моей проблемы. Спасибо, ребята.

Answer 1

Через 5 дней у меня есть решение моей проблемы.

Фактический код буферизирует userContent (то есть, когда когда-либо пользователь вводит что-либо в текстовое поле или текстовую область браузера FF), все будет помещено в буферную память. & это будет храниться до тех пор, пока пользователь не закроет текущую текстовую область или текстовое поле. Если пользователь открывает новое текстовое поле или новую текстовую область и вводит что-то, новый userContent будет сохранен в памяти буфера (старый буфер будет удален).

Идея очень проста для моей проблемы (о которой я не мог думать в самом начале):

Функция onKeypress:

 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;
            }

Это говорит браузеру, чтобы он обнаружил, что пользователь что-то печатает, и передает его в fillText (узел). Это вызов моей другой функции fillText : function (node) to fill the values(texts).

Чтобы проверить длину значения переменной userContent для запуска моего оповещения, если пользователь достиг назначенного значения числа.

     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");
} 

Вот полный код:

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;
        }

Примечание: 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.