SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 30
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2003
    Location
    PA
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    cursor position in text box

    I need to control the cursor position in a textbox to do this, does anyone know how to place the cursor in the textbox at a particular position

    The functionality I am looking for...
    Excel provides data entry help based on previous entries i.e. if in a previous cell in a column I entered "Jim Bob" then the next cell I type a "J" Excel provides help by showing "Jim Bob" in a way that allows me to pick it or keep typing. This is the kind of functionality I am trying to get using JS.

    In the code below I create an array of previous entries by the user over the last 45 days this all comes from a DB but that's not important here. When the user enters a key in the textbox I can pop the text box with a matching value from the array, only up to the chars entered.

    The Problem or Question:
    Is there a way to place the curser back into the last position and highlight the remaining part of the match from the array?

    This is really hard to explain but if you ever used Excel you may have an idea of what I am trying to do.


    <SCRIPT LANGUAGE="JavaScript">
    SRDataArray=new WddxRecordset();_t2=new Array();_t2[0]=566;_t2[1]=586;_t2[2]=708;_t2[3]=713;_t2[4]=727;_t2[5]=1093;_t2[6]=1495;_t2[7]=1831;_t2[8]=2;_t2[9]=4;_t2[10]=6;_t2[11]=7;_t2[12]=8;_t2[13]=9;_t2[14]=11;_t2[15]=12;_t2[16]=13;_t2[17]=14;_t2[18]=16;_t2[19]=17;_t2[20]=18;_t2[21]=2163;SRDataArray["rowid"]=_t2;_t2=new Array();_t2[0]="2002080074P";_t2[1]="2002080074W";_t2[2]="2002080132A";_t2[3]="2002080134A";_t2[4]="2002090007A";_t2[5]="2002100089A";_t2[6]="2002120036A";_t2[7]="2003010138A";_t2[8]="Authorized Time Off";_t2[9]="Death in Family";_t2[10]="Diversity Day";_t2[11]="Floating Holiday";_t2[12]="Holiday";_t2[13]="Illness";_t2[14]="Jury Duty";_t2[15]="Leave of Absence";_t2[16]="Long Term Disability";_t2[17]="Management Time Off";_t2[18]="Short Term Disability";_t2[19]="Unauthorized Absence";_t2[20]="Vacation";_t2[21]="as";SRDataArray["sr_number"]=_t2;_t2=new Array();_t2[0]="All work associated with Imations/DSS acquisition";_t2[1]="All work associated with Imations/DSS acquisition";_t2[2]="Move the bid process currently on LARK to the corp";_t2[3]="Rogue web site to be added to DecisionOne corporat";_t2[4]="Transportation web page updated and working";_t2[5]="Zip Code List";_t2[6]="DSS WEBPAGE PROBLEM";_t2[7]="Update the current program used to load airbill nu";_t2[8]="Authorized Time Off";_t2[9]="Death in Family";_t2[10]="Diversity Day";_t2[11]="Floating Holiday";_t2[12]="Holiday";_t2[13]="Illness";_t2[14]="Jury Duty";_t2[15]="Leave of Absence";_t2[16]="Long Term Disability";_t2[17]="Management Time Off";_t2[18]="Short Term Disability";_t2[19]="Unauthorized Absence";_t2[20]="Vacation";_t2[21]="as";SRDataArray["brief_desc"]=_t2;_t0=null;_t1=null;_t2=null;

    function textHelp(fld,n){

    // As a user enters letters display the closest value to it from previous history.
    var fldValue = fld.value;

    var updateTxtField = eval("document.all.txtDesc_" + n);
    for (var iLoop=0; iLoop < SRDataArray.rowid.length; iLoop++){
    [iLoop].substring(0,fldValue.length));

    // Based on the current pos of the curser in the textbox, select the first match
    if(fldValue==SRDataArray.sr_number[iLoop].substring(0,fldValue.length) ){
    fld.value=SRDataArray.sr_number[iLoop]
    updateTxtField.value = SRDataArray.brief_desc[iLoop];
    iLoop=SRDataArray.rowid.length;
    }
    }
    }

    </SCRIPT>


    Thanks

  2. #2
    SitePoint Enthusiast webmasts's Avatar
    Join Date
    Apr 2003
    Location
    usa
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To select a textbox you should code it like this in your function or whatever:

    <script language="javascript">

    function focus() {

    myforms.name.value.focus();

    }

    </script>

    <body onLoad="focus();">

    Here is the HTML form:

    <form name="myforms" method="post" action="">

    Name: <input type="text" name="name">

    <input type="submit" value="submit">

    </form>

    Hope this helps!

  3. #3
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I get exactly what you're saying. What browsers do you want this to work with?
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  4. #4
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Beetle'll show you the way, I needed something similar. You can put the cursor anywhere using word counting or character counting.

    I needed the curser to follow an array of numbers, I've got this far,
    Code:
    <script>
    i=0
    function hl()
    {
     var r = inp.createTextRange()
     r.move("character",i*3)
     r.expand("word")
     r.select();
    i++
    }
    </script>
    <textarea name="inp">
    12,12,12,12
    </textarea>
    
    <a onclick=hl()> hl
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  5. #5
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    _t2=new Array();_t2[0]=566;_t2[1]=586;_t2[2]=708;_t2[3]=713;_t2[4]=727;_t2[5]=1093;_t2[6]=1495;_t2[7]=1831;_t2[8]=2;_t2[9]=4;_t2[10]=6;_t2[11]=7;_t2[12]=8;_t2[13]=9;_t2[14]=11;_t2[15]=12;_t2[16]=13;_t2[17]=14;_t2[18]=16;_t2[19]=17;_t2[20]=18;_t2[21]=2163;

    simplified......

    _t2=new Array();(566,586,708,713,727,1093,1495,1831,2,4,6,7,8,9,11,12,13,14,16,17,18,2163)
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  6. #6
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    sorry
    new Array(566.......
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  7. #7
    SitePoint Enthusiast
    Join Date
    Mar 2003
    Location
    PA
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think what you did will work for a text area. We were looking for the same functionality in a textbox. I'll give it a try though. Thanks for your help!

  8. #8
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got an answer to my question?
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  9. #9
    SitePoint Enthusiast
    Join Date
    Mar 2003
    Location
    PA
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh sorry, it's an intranet site and the standard is IE5.5 or newer.

  10. #10
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, cool. Then I can do this with a DHTML-behavior. Heck, you could even do this with and XML data island. Hmmm, the possibilites in a static browser environment...
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  11. #11
    SitePoint Enthusiast
    Join Date
    Mar 2003
    Location
    PA
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have found no way to determine the position of a curser in a text box using DHTML/JS. This would be necessary to determine what words to display. In fact IE will display help in the form of a drop down, in a textbox. It displays values entered in the past. This is similar to what I want to do.

    Thanks

  12. #12
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bingo, gotcha covered. First, the HTML
    Code:
    <html>
    <head>
    	<title>Test</title>
    	<style type="text/css">
    	
    		input.autoFill {
    			behavior:url(auto_fill.htc)
    			}
    	
    	</style>
    	
    	<script type="text/javascript">
    		var vals = ['abcd','abdd','acaa','acad'];
    	</script>
    </head>
    <body>
    	<form>
    		<input type="text" class="autoFill" />
    		<br />
    		Below are the values in the javascript array
    		<br /><br />
    		abcd<br />
    		abdd<br />
    		acaa<br />
    		acad
    	</form>
    </body>
    </html>
    Now the HTC (this is the DHTML Behavior)
    Code:
    <public:component>
    	
    	<public:attach event="onkeyup" onevent="keyHandler()" />
    	<public:attach event="onkeydown" onevent="cancelEnter()" />
       
    	<script language="JScript">
    	
    		// Reverse values
    		var arr = vals.reverse();
    		
    		// Create TextRange object
    		var tr  = element.createTextRange();
    		
    		function keyHandler()
    		{
    			// Quit if backspace key or arrow keys
    			if ( /^(8|3[7-9]|40)$/.test( event.keyCode ) )
    			{
    				return;
    			}
    			
    			// Quit if value empty
    			if ( element.value == '' ) return;
    			
    			// Setup Variables			
    			var sVal  = element.value
    			var i	 = arr.length
    			var regex = new RegExp( "^" + sVal, "i" );
    			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];
    					
    					// 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>
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  13. #13
    SitePoint Enthusiast
    Join Date
    Mar 2003
    Location
    PA
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dig you, thanks! Any books you could recommend on this?

    Thanks again, very cool!

  14. #14
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  15. #15
    SitePoint Enthusiast
    Join Date
    Mar 2003
    Location
    PA
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is strange (to me anyway), why would the other events associated with the text box using the component above not fire. For instance when the onchange event is fired a function is called and another field is populated based on the value on the value of the field that fired the event.

  16. #16
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    can you show me your code? That doesn't sound right.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  17. #17
    SitePoint Enthusiast
    Join Date
    Mar 2003
    Location
    PA
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is a lot of code that has nothing to do with this so I created this small piece of HTML the shows the onchange event never gets fired if the "autoFill" behavior is used.

    ...........HTML START......
    <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']
    function checkfunctionfired(evt){
    alert(evt+"function fired!")
    }
    </script>
    <FORM>
    1 Uses the autoFill behavior. If the value is in the array (i.e. TEst Project) the onchange event is cancled onblur still works.
    <BR>
    1.) Has autoFill behavior : <INPUT class="autoFill" onblur="checkfunctionfired('onBlur 1')" autocomplete="off" type="Text" ONCHANGE="checkfunctionfired('onChange 1')" name="txtSrProj_8" id="txtSrProj_8" maxlength="20" size="15" value="">
    <BR>
    <BR>
    2 Does not use the autoFill behavior. Both events onBlur and on Change work.
    <BR>
    2.) No autoFill behavior : <INPUT onblur="checkfunctionfired('onBlur 2')" autocomplete="off" type="Text" ONCHANGE="checkfunctionfired('onChange 2')" name="txtSrProj_9" id="txtSrProj_9" maxlength="20" size="15" value="">
    </FORM>
    .............HTML END..........

    Thanks in advance.

  18. #18
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh. the onchange event never fires as a results of script editing - HTC or not.

    However, a few changes to our behavior and we can force it.
    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();
    		
    		// 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)$/.test( event.keyCode ) )
    			{
    				return;
    			}
    			
    			// Quit if value empty
    			if ( element.value == '' ) return;
    			
    			// Setup Variables			
    			var sVal  = element.value
    			var i	 = arr.length
    			var regex = new RegExp( "^" + sVal, "i" );
    			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];
    					
    					// 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>
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  19. #19
    SitePoint Enthusiast
    Join Date
    Mar 2003
    Location
    PA
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works great. I added delete to the keys to ignore. I have to figure out, for myself, how the events and behaviors react to other events and behaviors.

    Thanks for your help!

  20. #20
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No prob! How's 'bout a little reputation boost? (j/k)
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




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

  22. #22
    SitePoint Enthusiast
    Join Date
    Mar 2003
    Location
    PA
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Some characters like *+() are causing an unexpected quantifer error. Is there another way, other then using the key pressed to exclude the look up or using reg-x to not allow them, to avoid the error? I'd like to allow all characters if possible.

    Thanks in advance.

  23. #23
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah yes, that would create a problem, as the '+' is a quantifier in regular expressions meaning 1 or more. However, there is a fix! Change this line
    Code:
    var regex = new RegExp( "^" + sVal, "i" );
    to
    Code:
    var regex = new RegExp( "^" + sVal.toPattern(), "i" );
    Now, we need to add the toPattern method -- just insert this into the the <script> block in the HTC
    Code:
    String.prototype.toPattern = function()
    {
    	return this.replace( /([\.\*\+\{\}\(\)\<\>\^\$\\])/g, "\\$1" );
    }
    Although I haven't tested this specific application, I used the toPattern method alot for building regexs from strings, so I suspect this should work just fine.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  24. #24
    SitePoint Enthusiast
    Join Date
    Mar 2003
    Location
    PA
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks like toPattern() is a Java method. Looked on google and MSDN only found ref to Java. I was starting to think I need to go back to school. But then on a hunch based on your code I changed...

    This : var sVal = element.value

    To This : var sVal = element.value.replace( /([\.\*\+\{\}\(\)\<\>\^\$\\])/g, "\\$1" );

    And it seems to be working!

  25. #25
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, toPattern() may very well be a Java method, but it's not an inherent (host) method in ECMAscript (that's javascript to you). Fortunately, javacript is a prototype-based OO scripting langauge -- that's why I prototyped the toPattern method onto String objects
    Code:
    String.prototype.toPattern = function()
    {
    	return this.replace( /([\.\*\+\{\}\(\)\<\>\^\$\\])/g, "\\$1" );
    }
    I though I made it reasonably clear that you'd need to include this [img]images/smilies/confused.gif[/img]

    Oh well, what you have done is essentially the same thing, I just like to use custom methods for the sake of reusability.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev





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
  •