Capturing event when User right-click->paste into text box

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • RBPierce
    New Member
    • Sep 2007
    • 7

    Capturing event when User right-click->paste into text box

    Hey all, hoping someone can help me with a workaround. I've got an event set to fire when a textbox changes or loses focus- no problems. However, when the user clicks into the box and Right Click--> Pastes a value into it, I can't get any event to fire. I've tried onClick, OnChange, OnMouseDown, onMouseUp, onKeyDown, and onKeyUp.
    [code=html]
    <input type='text' onChange="alert ('Changed')" onClick="alert( 'Clicked')" onMouseDown="al ert('onMouseDow n')" onMouseUp="aler t('onMouseUp')" onKeyDown="aler t('onKeyDown')" onKeyUp="alert( 'onKeyUp')">[/code]

    I know I can do one of those stupid IE named scripts, but I was hoping someone somewhere had a multi-browser compliant solution!

    The paste event of the Clipboard API is fired when the user has initiated a "paste" action through the browser's user interface.
  • pbmods
    Recognized Expert Expert
    • Apr 2007
    • 5821

    #2
    Heya, RB. Welcome to TSDN!

    Changed thread title to better describe the problem (did you know that threads whose titles do not follow the Posting Guidelines actually get FEWER responses?).

    Please use CODE tags when posting source code. See the REPLY GUIDELINES on the right side of the page next time you post.

    Comment

    • acoder
      Recognized Expert MVP
      • Nov 2006
      • 16032

      #3
      Welcome to TSDN!

      Unfortunately, there's no reliable cross-browser way to capture a paste event. You can check this thread out. Why is it so important to capture this? Can you not just wait for onchange to fire when the text box loses focus?

      Comment

      • RBPierce
        New Member
        • Sep 2007
        • 7

        #4
        Thanks PB!

        acoder, upon successfully completing the input field in question, that value is then used to auto-complete various other fields on the page. If the user has to wait until they have tabbed/clicked to another input box in order for the auto-completion to kick in, we have violated GUI best practices by separating cause and effect.

        Additionally, I have helper text in which prompts the user what is needed, i.e. "Start Date required". That text disappears after a valid date is entered... unless they mouse paste, in which case the text remains, while they can clearly see that a good date WAS entered.

        Anyway, thanks for the help!

        Comment

        • iam_clint
          Recognized Expert Top Contributor
          • Jul 2006
          • 1207

          #5
          you can write a timer to check the value of the so called input box

          Example provided.
          [CODE=javascript]
          <script>
          var ival = "";
          var checkup = window.setInter val("checkChang e();", 100);
          function checkChange() {
          var nval = document.getEle mentById("test" ).value;
          if (nval!=ival) { alert("change in the text"); ival=nval; }
          }
          </script>
          <input type="text" id="test" name="test" value="">
          [/CODE]

          Comment

          • acoder
            Recognized Expert MVP
            • Nov 2006
            • 16032

            #6
            Originally posted by RBPierce
            acoder, upon successfully completing the input field in question, that value is then used to auto-complete various other fields on the page. If the user has to wait until they have tabbed/clicked to another input box in order for the auto-completion to kick in, we have violated GUI best practices by separating cause and effect.

            Additionally, I have helper text in which prompts the user what is needed, i.e. "Start Date required". That text disappears after a valid date is entered... unless they mouse paste, in which case the text remains, while they can clearly see that a good date WAS entered.
            Aah, that makes more sense. Well, iam_clint has posted a good workaround. Hopefully that should solve your problem.

            Comment

            • RBPierce
              New Member
              • Sep 2007
              • 7

              #7
              Thanks iam- I'll look into it!

              Comment

              • pbmods
                Recognized Expert Expert
                • Apr 2007
                • 5821

                #8
                I wonder if you can use an onclick or maybe onrightclick (?) event handler that compares the current value of the textbox to the last value....

                [EDIT: Just about the same thing iam_clint posted, except without the setInterval() call. Ah well.]

                Comment

                • tushar chavan
                  New Member
                  • Dec 2009
                  • 1

                  #9
                  Thanx ....
                  this was really helpful...

                  we can call the same function used to capture rest of mouse and key events(onkeyup, onblurr etc) .


                  this is wat i did for a multiline textbox to change the height dynamically

                  Code:
                  <asp:TextBox ID="txtdemo" runat="server" TextMode="MultiLine" Width="286px" onmouseup = "fnStartClock()" onkeydown="textAreaSize()" onblur="textAreaSize()" onfocus="textAreaSize()" onkeyup="textAreaSize()" height="16px" ></asp:TextBox>
                  Code:
                  ////////////////////////////////////////////////////
                  function used for any event after clicking the mouse button called for a particular interval(for onmouseup and onmousedown)
                  ///////////////////////////////////////////////////
                  var oInterval;
                  function fnStartClock(){
                  if(oInterval!=null)
                  {
                   window.clearTimeout(oInterval);
                   i=0;
                   }
                     oInterval = window.setInterval("textAreaSize()", 200); 
                     
                  }
                  
                  //////////////////////////////////////////////////
                  here textAreaSize() is the function called for the rest of the events....
                  it is used to change the height of a multiline textbox on entering a data 
                  /////////////////////////////////////////////////
                  var i=0;
                  
                  function textAreaSize()
                  {
                  
                  var na= document.getElementById('ctl00_BodyContent_txtdemo')
                  
                  var text = na.value.replace(/\s+$/g,'') ;  
                  var split = text.split("\n");  
                  var tbHeight = 16*split.length; 
                  if(tbHeight>200)
                  tbHeight=200
                     document.getElementById('ctl00_BodyContent_txtdemo").style.height = tbHeight;
                   i++;
                   if(i>100)
                   {
                   window.clearTimeout(oInterval);
                   i=0;
                   }
                  
                  }
                  hope this is helpful.....
                  Last edited by Dormilich; Dec 18 '09, 08:54 AM. Reason: Please use [code] tags when posting code

                  Comment

                  • Steve Lewy

                    #10
                    Thanks Clint, that was very helpful.

                    Comment

                    Working...