SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2003
    Location
    PA
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    auto fill text field

    I have an HTC (Thanks to Beetle) that auto fills a field as a user key strokes letters into a text box. Except for one thing everything works great. The one thing is if a use types somethin in that is found, accepts it (tabs out of the field) the goes back to the first letter and trys to change the case (upper to lower or vise versa) it gets an error "invalid argument". I cannot seem to figure out why it would error. Below I have all of the code HTML and HTC should be easy to plug and play. Please let me know what you think.

    Thanks


    I have a test HTML page below to show the issue...

    Code:
      
     
    <STYLE TYPE="text/css">
     input.autoFill {
      behavior:url(auto_fill.htc)
     }
    </STYLE>
    <script language="JavaScript">
    var vals = ['TEst Project','Developer Assist','Time Management','Developer Assist','email','Warranty','Meeting']
    </script>
    <FORM>
    Running into the following problem when making a change to the selected value...
      
    The textbox below uses the autoFill behavior. If the value is in the array ['TEst Project','Developer Assist','Time Management','Developer Assist','email','Warranty','Meeting']
    (i.e. TEst Project) it comes up fine. The error occurs when you change the first letter 
    i.e. once "TEst project" comes up use the mouse to highlight the "T" change it to lower case this
    is where you will get the "invalid argument" error. I tracked it down to where the 
    component calls this statement [found = tr.findText( element.value.replace( regex, "" ), -1 );]
    <br>
    I actually would like to stop the update process if the user goes back and changes something, like making the "T" lower case.
    <br>
    Has autoFill behavior : <INPUT class="autoFill" autocomplete="off" type="Text" name="txtSrProj_8" id="txtSrProj_8" maxlength="20" size="15" value="">
    <BR>
    I have tried several hacks the result was no error but the "t" went back to upper case. 
     
    </FORM>
    Name this file "auto_fill.htc" Thanks to Beetle for this code....

    <<<<<< BEGIN auto_fill.htc >>>>>>>
    Code:
      
    <public:component>
     
     <public:attach event="onkeyup" onevent="keyHandler()" />
     <public:attach event="onkeydown" onevent="cancelEnter()" />
     <public:attach event="oncontentready" onevent="setCurrent()" />
     <public:attach event="onfocus" onevent="setCurrent()" />
     <public:attach event="onblur" onevent="checkForChange()" />
     
     <script language="JScript"> 
     
      // Reverse values
      var arr = vals.reverse();
      
      // Create TextRange object
      var tr  = element.createTextRange();
      
      String.prototype.toPattern = function()
      {
       return this.replace( /([\.\*\+\{\}\(\)\<\>\^\$\\])/g, "\\$1" );
      }
      
      // Other vars
      var currentVal;
      function setCurrent()
      {
       currentVal = element.value;
      }
      
      function checkForChange()
      {
       if ( element.value != currentVal )
       {
    	element.onchange();
       }
      }
      
      function keyHandler()
      {
       
       // Quit if backspace key or arrow keys
       if ( /^(8|3[7-9]|40|46)$/.test( event.keyCode ) )
       {
    	return;
       }
       
       // Quit if value empty
       if ( element.value == '' ) return;
       
       // Setup Variables   
       var sVal  = element.value
       var regex = new RegExp( "^" + sVal.toPattern(), "i" );
       var i  = arr.length
       var found = false
       
       // Loop through array
       while ( i-- > 0 )
       {
    	
    	// Look for value
    	if ( regex.test( arr[i] ) )
    	{
    	 // Continue if full word match
    	 if( element.value == arr[i] )
    	 {
    	  continue;
    	 }
    	 
    	 // Set value to match
    	 element.value = arr[i];
    	 // if user replaces the first char need to skip
    	 //if(element.value.replace( regex, "" )!=""){
    	 // Select auto-filled portion
    	 found = tr.findText( element.value.replace( regex, "" ), -1 );
    	 //}
    	 
    	 if ( found )
    	 {
    	  tr.select();
    	 }
    	 
    	 // Break from loop
    	 break;
    	}
       }
      }
      
      // Will cancel the enter-key event
      function cancelEnter()
      {
       if ( event.keyCode == 13 )
       {
    	tr.collapse( false );
    	tr.select();
    	event.returnValue = false;
       }
      }
      
     </script> 
     
    </public:component>
    <<<<< END auto_fill.htc >>>>>

    Thanks for your help!

  2. #2
    SitePoint Enthusiast
    Join Date
    Mar 2003
    Location
    PA
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Don't get it!

    I have no idea what's going on. In the forms text box; after replacing the first letter with the lower case of the same letter; I get this error "Invalid Argument". This where the error is...

    Code:
    found = tr.findText( element.value.replace( regex, "" ), -1 ); 
    The rest of the code is in the orginal post below.

    Any ideas?

    Thanks for your help.

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2003
    Location
    PA
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Finally

    Got It!
    I changed this
    Code:
    if( element.value== arr[i] )
    to this
    Code:
    if( element.value.toUpperCase() == arr[i].toUpperCase() )
    Now when a user returns to the text and the values match changes are ingored! Exactlly what I wanted.

    Thanks


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •