Firefox and spaces

[tmcneil]

I have a block of javascript code that takes printable characters, converts them to a string and adds them together to create a word. I have come across a problem in FF that when the space bar is pressed, the code does not add a space to the combo_word value. IE has no problem handling this the correct way. Is this a limitation of Firefox?

 // space bar works in IE, not in FF (char code 32)
	if(c>=32 && c<=126)	// Printable characters
	{
	    if (c == 32)  // if space bar pressed, add an empty space
            if (navigator.appName=="Netscape")  // FF
	            combo_word += " ";
		combo_word += String.fromCharCode(c);
		//element.options[2].value = combo_word;  // take_id will not be selected
		                                          // and default to 0
		element.options[2].text = combo_word;
		var combo_wlc = combo_word.toLowerCase();
		var combo_select = 2;
		for(i=1; i<element.options.length; i++)
		{
			combo_sel = element.options[i].text.toLowerCase();
			if(combo_wlc.length <= combo_sel.length)
			{
				combo_sel = combo_sel.substring(0, combo_wlc.length);
				if(combo_wlc == combo_sel)
					combo_select = i;
			}
		}
		element.selectedIndex = combo_select;
	}

I have added code to try and handle char code 32, you shoudl see it in the above code, but it will not add a space to the string. Any ideas how to solve this?

Thanks,
Todd

 

[monksnake]

Put an this alert above this statement:

alert(c);
if (c == 32) {

See if 32 is actually getting put into variable c.

<.

 

[BillyRayPreachersSon]

What event are you using to fire this? I ask this as the onkeyUp/Down/Press events act differently, so perhaps you could show a bit more code (like a real test harness)?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[tmcneil]

billyraypreachersson,

The code is called on the onKeypress event for the select box. I have included the entire code for the function.

// The real work.  Update the editable word and the select box.
function combo_keypress(element, event)
{
	// Do not call this again on keyup.
	combo_keypress_called = true;

	// Get the current key pressed.
	var c=0;
	if(event.keyCode) c = event.keyCode;
	else if(event.charCode) c = event.charCode;
	else if (event.which) c = event.which;
	// Don't block the tab key
	if(c == 9) return true;

	// Konqueror sends all alpha-characters in as upper case.
	// This converts them to lower case if shift is not pressed.
	if(!event.shiftKey)
	{
		if(c>=65 && c<=90) c+= 32;
		else if(c == 190) c = 46; // period
		else if(c == 189) c = 45; // minus sign
		else if(c == 187) c = 61; // equal sign
		else if(c == 192) c = 96; // backtick
		else if(c == 222) c = 39; // single quote
		else if(c == 186) c = 59; // ;
	}
	// IE doesn't send the numbers shifted.
	else
	{
		if(c == 48) c = 41;
		else if(c == 49) c = 33;
		else if(c == 50) c = 64;
		else if(c == 51) c = 35;
		else if(c == 52) c = 36;
		else if(c == 53) c = 37;
		else if(c == 54) c = 94;
		else if(c == 55) c = 38;
		else if(c == 56) c = 42;
		else if(c == 57) c = 40;
		else if(c == 187) c = 43; // plus sign
		else if(c == 189) c = 95; // underscore
		else if(c == 192) c = 126; // ~
		else if(c == 222) c = 34; // quotes
		else if(c == 186) c = 58; // :
	}

	// This is used to get char codes that don't show up properly.
	//if(c > 126) alert(c);

    // space bar works in IE, not in FF (char code 32)
	if(c>=32 && c<=126)	// Printable characters
	{
	    //alert("c: " + c);
	    if (c == 32)  // if space bar pressed, add an empty space
            if (navigator.appName=="Netscape")  // FF
	            combo_word += " ";
		
		combo_word += String.fromCharCode(c);
		//element.options[2].value = combo_word;  // take_id will not be selected
		                                          // and default to 0
		element.options[2].text = combo_word;
		var combo_wlc = combo_word.toLowerCase();
		var combo_select = 2;
		for(i=1; i<element.options.length; i++)
		{
			combo_sel = element.options[i].text.toLowerCase();
			if(combo_wlc.length <= combo_sel.length)
			{
				combo_sel = combo_sel.substring(0, combo_wlc.length);
				if(combo_wlc == combo_sel)
					combo_select = i;
			}
		}
		element.selectedIndex = combo_select;
	}
	else if((c == 8 || c == 4099) && combo_word.length>0)	// Backspace
	{
		combo_word = combo_word.substring(0, combo_word.length-1);
		//element.options[2].value = combo_word;  // take_id will not be selected
		                                          // and default to 0
		element.options[2].text = combo_word;
		element.selectedIndex = 2;
	}
	
    OnSelText(element);	
	combo_focus(element);  // Make sure combo_word is set after every keypress
	return false;
}

FF does recognize the space bar, so I'm not sure why I cannot force the " " into the building of combo_word.

Todd

 

[tmcneil]

monksnake,

Well, based on this:

if (c == 32)  // if space bar pressed, add an empty space
    if (navigator.appName=="Netscape")  // FF
    {
        alert("c: " + c);
        combo_word += "t";
    }

I am reading the space bar and am concattenating the "t" onto the combo_word string every time the space bar is pressed. Well, if I change the "t" to " ", a blank space, Firefox just tosses it aside and doesn't. I'm thinking this is a limitation to FF. Strange though...

Todd

 

[BillyRayPreachersSon]

Can you post your form code, and also the code you are using to attach the combo_keypress function to the select element?

I ask, as normally, the event data is the first parameter to be passed, whereas you have it as the second.

Taking this into account, I knocked up a quick test harness to insert the event data as the second parameter, and when I log the combo_word string, spaces appear perfectly fine. For this reason, I suspect without seeing all your relevant source, or better still, a URL, it will be hard to debug your code.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[tmcneil]

BillyRayPreachersSon,

Here is the form code:

Set cn = GetDBConnection()
    Set SQLStmt1 = Server.CreateObject("ADODB.Command")
    Set SQLStmt2 = Server.CreateObject("ADODB.Command")
    Set RS1 = Server.CreateObject("ADODB.Recordset")
    Set RS2 = Server.CreateObject("ADODB.Recordset")
    SQLStmt1.CommandText = "SELECT TAKE_KIND_ID, DESCRIPTION, CB_FLAG " & _
                           "FROM MESSAGE_KINDS_V "                      & _
                           "WHERE MSG_ID = "                            & _
                           CStr(MessageID)
    SQLStmt1.CommandType = 1
    Set SQLStmt1.ActiveConnection = cn
    RS1.Open SQLStmt1
    count = 0
    count1 = 0  'count of amber alert combo boxes
    tkList = ""
    Do While Not RS1.EOF
%>
        <tr class="item" height="28">
            <td width="350" nowrap><%=RS1("DESCRIPTION")%></td>
            <td width="425" nowrap>
<%  
    fs = ""
    If (((macroSelected = 0) AND (nseltakes = 0)) ) Then
    	fs = "selected" 
    ElseIf (macroSelected = 0) Then
    	tk = "text" & CStr(count+1)
        if GetVal(tk, 0) = 0 Then
        	fs = "selected"
        end if
    End If
    
    cbFlag = RS1("CB_FLAG")
        If cbFlag = "N" Then %>
                <select id="text<%=count+1%>" name="text<%=count+1%>" size="1" style="width: 300px;" onChange="OnSelText(this);">
                    <option value="0" <%=fs%>>Select <%=RS1("DESCRIPTION")%>
<%      Else
            count1 = count1 + 1%>
                <select include=true id="text<%=count+1%>" name="text<%=count+1%>" size="1" style="width: 300px;"
                 onFocus="return combo_focus(this);"
	             onChange="return combo_change(this); OnSelText(this);"
	             onKeydown="return combo_keydown(this, event); OnSelText(this);"
	             onKeypress="return combo_keypress(this, event);"
	             onKeyup="return combo_keyup(this, event);">
                    <option value="0" <%=fs%>>Enter <%=RS1("DESCRIPTION")%>
<%      End If
     
        SQLStmt2.CommandText = "SELECT TAKE_ID, DESCRIPTION "                      & _
                               "FROM MESSAGE_TAKE_KINDS_V "                        & _
                               "WHERE TAKE_KIND_ID = " & CStr(RS1("TAKE_KIND_ID")) & _
                               "ORDER BY TAKE_ID ASC"
        SQLStmt2.CommandType = 1
        Set SQLStmt2.ActiveConnection = cn
        RS2.Open SQLStmt2
            Do While Not RS2.EOF
%>
                    <option value="<%=RS2("TAKE_ID")%>"
<%  
				    if mode = "edit" then
					    if CLng(RS2("TAKE_ID")) = CInt(cfgTakes(count)) then
%>
				    selected
<%
					    end if
				    else
%>
               	    <%=TakeSelected(count)%>
<%
				    end if
%>
               	    ><%=RS2("DESCRIPTION")%>
<%          '
            ' This section may be written in a cleaner fashion in the future
            ' Store empty slot take_id's into tkList from cbo's in comma-delimited fashion
            If cbFlag = "Y" Then
                If RS2("DESCRIPTION") = "Unknown" Then
                    tkList = tkList
                Else
                    tkList = tkList & CLng(RS2("TAKE_ID")) & ","
                End If
            End If
            '
            '
            
            RS2.MoveNext
        Loop
        RS2.Close
%>
                </select>
            </td>
        </tr>
<%
    count = count + 1
    RS1.MoveNext
    Loop
    
    '
    ' This section may be written in a cleaner fashion in the future
    ' Remove trailing "," from tkList
    delim = ""
    delim = Right(tkList,1)
    if (delim = ",") then
        tkList = Left(tkList,Len(tkList)-1)
    end if
    '
    '
    FOR row = count to 14
%>
        <tr class="item" height="28">
            <td width="350">&nbsp;</td>
            <td width="425">&nbsp;</td>
        </tr>
<%  NEXT %>
    
		</tbody>
		</table>
	</div>
<%  
    RS1.Close
    cn.Close
    Set cn = Nothing
%>
		<input type="hidden" id="ntakes"  name="ntakes"  value="<%=count%>">
		<input type="hidden" id="aatakes" name="aatakes" value="<%=count1%>">
		</td>
	</tr>	
</table>
</div>

Here is the js events associated with it. This code was taken off of a website and some of it was rewritten to get it to do what I needed.

/********************************************************************
* HTML ComboBox
* Copyright (C)2005 CS Wagner.
* This provides ComboBox functionality for HTML.
*********************************************************************
* HOWTO:
* You may use this on as many select elements as you want.
* For each select element, add the following three lines:
*   onfocus='javascript:return combo_focus(this);'
*   onchange='javascript:return combo_focus(this);'
*   onkeydown='javascript:return combo_keydown(this,event);'
*   onkeypress='javascript:return combo_keypress(this,event);'
*   onkeyup='javascript:return combo_keyup(this,event);'
* Also, make sure the first option is empty, as in:
*   <option value=''></option>
*********************************************************************
* HOW IT WORKS:
* This attempts to capture key presses and alter the value of the
* first option in the select list.  Doing so can be very complicated
* because every web browser seems to process key press events in a
* different way.
* Others have tried this and have hit common problems.  The ones that
* I know of, I have tried to handle:
* Backspace Problem:
*   When you hit backspace, you go to the previous web page.
*   I fixed this by cancelling the default backspace function.
* Auto-Selection of Options:
*   When you type the first letter of an option, the option is
*   selected automatically.
*   I fixed this by cancelling the default auto-select function.
* Edit of Existing Options:
*   Can user edit an option in the list?
*   When you edit while an option is selected, the edits replace the
*   first (editable) item in the list.
*********************************************************************
* COMPATABILITY:
* If the user does not have Javascript, this will not work.
* However, they will easily use the Select field with the values in
* the field.
* I have tried very hard to use Javascript that is common to all web
* browsers, so it will function to some degree for everyone.
*
* I have tested this with:
* Firefox 1.0.7: There is a bug in Firefox. When you set a select
*   box's index, it doesn't always update.  Also, when you cancel the
*   auto-select, it still auto-selects sometimes.
* Konqueror 3.5: This works fine.
* Internet Explorer 6.0: It is functional, but many keys do not work.
*   I have added work-arounds for all letter/number keys.
* Opera: I have tested it in the past and hitting backspace is always
*   treated as clicking the back button.
*********************************************************************/

var combo_word;	 //The user-editable word
var combo_keypress_called;	// A fix for Konqueror/Safari

// When select is focused, set the editable word.
function combo_focus(element)
{
    /*
    // original code for function combo_focus(element)
    combo_word = "";
	if(element.selectedIndex >= 0)
		combo_word = element.options[element.selectedIndex].text;
	return true;
	*/
	
    combo_word = "";
    
    var textList = "";  //comma-delimited list of text values
    //var pos = document.forms[0].pos.value;
    
    if(element.selectedIndex >= 0)
	{
	    combo_word = element.options[element.selectedIndex].text;
	    // create arList array
        var arList = [];
        var frm = document.forms[0];
        for (var i=0; i<frm.elements.length; i++)
            if (frm.elements[i].tagName == 'SELECT')  //look for all select elements
                // look for all select elements with an attribute of "include" set to "true"
                if (frm.elements[i].getAttribute('include') == "true")
                {
                    var txt = frm.elements[i].options[frm.elements[i].selectedIndex].text;
                    // do not include "Enter.." or "Unknown" when building arList
                    if (!txt.match(/Enter|Unknown/g))
                        arList[arList.length] = txt;
                    else
                        if (document.forms[0].aatakes.value != 1)
                            arList[arList.length] = "";
                }
                document.forms[0].cbValues.value = arList.join(',');
    }
    //alert("cbValues: " + document.forms[0].cbValues.value);
    return true;
}

// Same function as focus, but here to make the HTML less confusing.
function combo_change(element)
{
    OnSelText(element); 
	return combo_focus(element);
}

// Return false to try and block built-in keydown functions.
function combo_keydown(element, event)
{
	var c=0;
	if(event.keyCode) c = event.keyCode;
	else if(event.charCode) c = event.charCode;
	else if (event.which) c = event.which;
	// Don't block the tab key
	if(c == 9) return true;

	// We have not called keypress yet.
	combo_keypress_called = false;
	return false;
}

// The real work.  Update the editable word and the select box.
function combo_keypress(element, event)
{
	// Do not call this again on keyup.
	combo_keypress_called = true;

	// Get the current key pressed.
	var c=0;
	if(event.keyCode) c = event.keyCode;
	else if(event.charCode) c = event.charCode;
	else if (event.which) c = event.which;
	// Don't block the tab key
	if(c == 9) return true;

	// Konqueror sends all alpha-characters in as upper case.
	// This converts them to lower case if shift is not pressed.
	if(!event.shiftKey)
	{
		if(c>=65 && c<=90) c+= 32;
		else if(c == 190) c = 46; // period
		else if(c == 189) c = 45; // minus sign
		else if(c == 187) c = 61; // equal sign
		else if(c == 192) c = 96; // backtick
		else if(c == 222) c = 39; // single quote
		else if(c == 186) c = 59; // ;
	}
	// IE doesn't send the numbers shifted.
	else
	{
		if(c == 48) c = 41;
		else if(c == 49) c = 33;
		else if(c == 50) c = 64;
		else if(c == 51) c = 35;
		else if(c == 52) c = 36;
		else if(c == 53) c = 37;
		else if(c == 54) c = 94;
		else if(c == 55) c = 38;
		else if(c == 56) c = 42;
		else if(c == 57) c = 40;
		else if(c == 187) c = 43; // plus sign
		else if(c == 189) c = 95; // underscore
		else if(c == 192) c = 126; // ~
		else if(c == 222) c = 34; // quotes
		else if(c == 186) c = 58; // :
	}

	// This is used to get char codes that don't show up properly.
	//if(c > 126) alert(c);

    // space bar works in IE, not in FF (char code 32)
	if(c>=32 && c<=126)	// Printable characters
	{
	    if (c == 32)  // if space bar pressed, add an empty space
            if (navigator.appName=="Netscape")  // FF
            {
                alert("c: " + c);
	            combo_word += " ";  // FF will not add empty space
	        }
		
		combo_word += String.fromCharCode(c);
		//element.options[2].value = combo_word;  // take_id will not be selected
		                                          // and default to 0
		element.options[2].text = combo_word;
		var combo_wlc = combo_word.toLowerCase();
		var combo_select = 2;
		for(i=1; i<element.options.length; i++)
		{
			combo_sel = element.options[i].text.toLowerCase();
			if(combo_wlc.length <= combo_sel.length)
			{
				combo_sel = combo_sel.substring(0, combo_wlc.length);
				if(combo_wlc == combo_sel)
					combo_select = i;
			}
		}
		element.selectedIndex = combo_select;
	}
	else if((c == 8 || c == 4099) && combo_word.length>0)	// Backspace
	{
		combo_word = combo_word.substring(0, combo_word.length-1);
		//element.options[2].value = combo_word;  // take_id will not be selected
		                                          // and default to 0
		element.options[2].text = combo_word;
		element.selectedIndex = 2;
	}
	
    OnSelText(element);	
	combo_focus(element);  // Make sure combo_word is set after every keypress
	return false;
}

// Return false to try and block built-in keyup functions (like auto-select).
function combo_keyup(element, event)
{
	var c=0;
	if(event.keyCode) c = event.keyCode;
	else if(event.charCode) c = event.charCode;
	else if (event.which) c = event.which;
	// Don't block the tab key
	if(c == 9) return true;

	// If keypress was not called, call it now.
	if(!combo_keypress_called)
		return combo_keypress(element, event);
	return false;
}

Some of this code will look familiar from previous posts or threads. i apologize for the length of the post, but here is all the code that you should need.

Todd

 

[BillyRayPreachersSon]

Can you post the client-side HTML - I don't have a server-side environment with acces to your DB...

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[tmcneil]

Dan,

It's kind of lengthy, but here it goes:

<!--****************************************-->
<!-- COMPLETE TAB -->
<!--****************************************-->
<DIV id="Complete" STYLE="display:  none ; width: 1000px; height:500px; border: 2px solid #A58E6B; BORDER-left: 1px solid #EFE7DE; border-top: none;  padding: 10px;">
<table border="0" cellspacing="0" cellpadding="0"  style="padding: 5px; border: none;">
	<tr align="left" valign="top">
		<td width="800">
	        <textarea cols="82" rows="5"
             name="textmessage1" STYLE="color: white; background: #A58E6B; font-style:normal; font-variant:normal; font-weight:normal; font-size:20; font-family:Arial" READONLY>ATTENTION PASSENGERS – A CHILD ABDUCTION HAS OCCURRED AND THE MASSACHUSETTS STATE POLICE NEED YOUR HELP.  ANYONE SEEING A [VEHICLE COLOR] [VEHICLE MAKE] [VEHICLE MODEL] WITH [STATE] LICENSE [LICENSE PLATE NUMBER].  PLEASE CALL 911 OR NOTIFY THE NEAREST MBTA EMPLOYEE.  YOUR COOPERATION MAY HELP SAVE A CHILD’S LIFE.  THANK YOU.</textarea>

	    </td>
	    <!--<td valign="top" align="center" width="75">
	    </td>-->
        <td valign="top" align="center" width="150">
			<font size="1" style="font-size: 1pt;">
		        <input class="dlgbutton" type="button" name="UPDATE" value="Update" title="Update Message" onClick="Submit('Update Message');">
		        <br><br>
		        <input class="dlgbutton" type="button" name="CLEAR" value="Clear" title="Clear Complete Tab" onClick="Submit('Clear Complete Tab');">
		        <br><br>
		        <input class="dlgbutton" type="button" name="IMAGES" value="Images" title="Upload" onClick="showPopWin('modalContent.html', 800, 250, null);">

		        <br><br>  
			</font>
        </td>
	</tr>

    <tr>
		<td colspan="2"class="canvas" valign="top" align="left">
			<br>
			
			
			<div id="tableContainer" class="tableContainer" style="height: 336px; width: 800px;">
				<table border="0" cellpadding="0" cellspacing="0">

					<thead class="fixedHeader">
					<tr>
						<th width="350">Type</th>
						<th width="428">Textual Value</th>
						<th width="8">&nbsp;</th>
					</tr>
					</thead>
					<tbody class="scrollContent" style="height: 309px;"> <!-- 275/251 -->

			
        <tr class="item" height="28">
            <td width="350" nowrap>Vehicle Color</td>
            <td width="425" nowrap>

                <select id="text1" name="text1" size="1" style="width: 300px;" onChange="OnSelText(this);">
                    <option value="0" selected>Select Vehicle Color
                    <option value="60000"

               	    >Unknown
                    <option value="60001"

               	    >Black
                    <option value="60002"

               	    >Blue
                    <option value="60003"

               	    >Light Blue
                    <option value="60004"

               	    >Dark Blue
                    <option value="60005"

               	    >Brown
                    <option value="60006"

               	    >Tan
                    <option value="60007"

               	    >Green
                    <option value="60008"

               	    >Light Green
                    <option value="60009"

               	    >Dark Green
                    <option value="60010"

               	    >Red
                    <option value="60011"

               	    >Pink
                    <option value="60012"

               	    >Maroon
                    <option value="60013"

               	    >Purple
                    <option value="60014"

               	    >Orange
                    <option value="60015"

               	    >Yellow
                    <option value="60016"

               	    >Silver
                    <option value="60017"

               	    >Gray
                    <option value="60018"

               	    >White
                </select>

            </td>
        </tr>

        <tr class="item" height="28">
            <td width="350" nowrap>Vehicle Make</td>
            <td width="425" nowrap>

                <select id="text2" name="text2" size="1" style="width: 300px;" onChange="OnSelText(this);">
                    <option value="0" selected>Select Vehicle Make
                    <option value="61000"

               	    >Unknown
                    <option value="61001"

               	    >Acura
                    <option value="61002"

               	    >Aston Martin
                    <option value="61003"

               	    >Audi
                    <option value="61004"

               	    >Bentley
                    <option value="61005"

               	    >BMW
                    <option value="61006"

               	    >Buick
                    <option value="61007"

               	    >Cadillac
                    <option value="61008"

               	    >Chevy
                    <option value="61009"

               	    >Chrysler
                    <option value="61010"

               	    >Dodge
                    <option value="61011"

               	    >Ferrari
                    <option value="61012"

               	    >Ford
                    <option value="61013"

               	    >GMC
                    <option value="61014"

               	    >Honda
                    <option value="61015"

               	    >Hummer
                    <option value="61016"

               	    >Hyundai
                    <option value="61017"

               	    >Infiniti
                    <option value="61018"

               	    >Isuzu
                    <option value="61019"

               	    >Jaguar
                    <option value="61020"

               	    >Jeep
                    <option value="61021"

               	    >Kia
                    <option value="61022"

               	    >Lamborghini
                    <option value="61023"

               	    >Land Rover
                    <option value="61024"

               	    >Lexus
                    <option value="61025"

               	    >Lincoln
                    <option value="61026"

               	    >Lotus
                    <option value="61027"

               	    >Mazda
                    <option value="61028"

               	    >Mercedes Benz
                    <option value="61029"

               	    >Mercury
                    <option value="61030"

               	    >Mini
                    <option value="61031"

               	    >Mitsubishi
                    <option value="61032"

               	    >Nissan
                    <option value="61033"

               	    >Pontiac
                    <option value="61034"

               	    >Porsche
                    <option value="61035"

               	    >Rolls Royce
                    <option value="61036"

               	    >Saab
                    <option value="61037"

               	    >Saturn
                    <option value="61038"

               	    >Scion
                    <option value="61039"

               	    >Subaru
                    <option value="61040"

               	    >Suzuki
                    <option value="61041"

               	    >Toyota
                    <option value="61042"

               	    >Volkswagen
                    <option value="61043"

               	    >Volvo
                </select>

            </td>
        </tr>

        <tr class="item" height="28">
            <td width="350" nowrap>Vehicle Model</td>
            <td width="425" nowrap>

                <select id="text3" name="text3" size="1" style="width: 300px;" onChange="OnSelText(this);">
                    <option value="0" selected>Select Vehicle Model
                    <option value="62000"

               	    >Unknown
                    <option value="62001"

               	    >SUV
                    <option value="62002"

               	    >Minivan
                    <option value="62003"

               	    >Wagon
                    <option value="62004"

               	    >Sedan
                    <option value="62005"

               	    >Compact Sedan
                    <option value="62006"

               	    >Midsize Sedan
                    <option value="62007"

               	    >Large Sedan
                    <option value="62008"

               	    >Convertible
                    <option value="62009"

               	    >Truck
                    <option value="62010"

               	    >Compact Truck
                    <option value="62011"

               	    >Large Truck
                    <option value="62012"

               	    >Coupe
                    <option value="62013"

               	    >Hybrid
                </select>

            </td>
        </tr>

        <tr class="item" height="28">
            <td width="350" nowrap>State</td>
            <td width="425" nowrap>

                <select id="text4" name="text4" size="1" style="width: 300px;" onChange="OnSelText(this);">
                    <option value="0" selected>Select State
                    <option value="27000"

               	    >Unknown
                    <option value="27001"

               	    >Alabama
                    <option value="27002"

               	    >Alaska
                    <option value="27003"

               	    >Arizona
                    <option value="27004"

               	    >Arkansas
                    <option value="27005"

               	    >California
                    <option value="27006"

               	    >Colorado
                    <option value="27007"

               	    >Connecticut
                    <option value="27008"

               	    >Delaware
                    <option value="27009"

               	    >District of Columbia
                    <option value="27010"

               	    >Florida
                    <option value="27011"

               	    >Georgia
                    <option value="27012"

               	    >Hawaii
                    <option value="27013"

               	    >Idaho
                    <option value="27014"

               	    >Illinois
                    <option value="27015"

               	    >Indiana
                    <option value="27016"

               	    >Iowa
                    <option value="27017"

               	    >Kansas
                    <option value="27018"

               	    >Kentucky
                    <option value="27019"

               	    >Louisiana
                    <option value="27020"

               	    >Maine
                    <option value="27021"

               	    >Maryland
                    <option value="27022"

               	    >Massachusetts
                    <option value="27023"

               	    >Michigan
                    <option value="27024"

               	    >Minnesota
                    <option value="27025"

               	    >Mississippi
                    <option value="27026"

               	    >Missouri
                    <option value="27027"

               	    >Montana
                    <option value="27028"

               	    >Nebraska
                    <option value="27029"

               	    >Nevada
                    <option value="27030"

               	    >New Hampshire
                    <option value="27031"

               	    >New Jersey
                    <option value="27032"

               	    >New Mexico
                    <option value="27033"

               	    >New York
                    <option value="27034"

               	    >North Carolina
                    <option value="27035"

               	    >North Dakota
                    <option value="27036"

               	    >Ohio
                    <option value="27037"

               	    >Oklahoma
                    <option value="27038"

               	    >Oregon
                    <option value="27039"

               	    >Pennsylvania
                    <option value="27040"

               	    >Rhode Island
                    <option value="27041"

               	    >South Carolina
                    <option value="27042"

               	    >South Dakota
                    <option value="27043"

               	    >Tennessee
                    <option value="27044"

               	    >Texas
                    <option value="27045"

               	    >Utah
                    <option value="27046"

               	    >Vermont
                    <option value="27047"

               	    >Virginia
                    <option value="27048"

               	    >Washington
                    <option value="27049"

               	    >West Virginia
                    <option value="27050"

               	    >Wisconsin
                    <option value="27051"

               	    >Wyoming
                    <option value="27052"

               	    >American Samoa
                    <option value="27053"

               	    >Puerto Rico
                    <option value="27054"

               	    >Virgin Islands
                </select>

            </td>
        </tr>

        <tr class="item" height="28">
            <td width="350" nowrap>License Plate Number</td>
            <td width="425" nowrap>

                <select include=true id="text5" name="text5" size="1" style="width: 300px;"
                 onFocus="return combo_focus(this);"
	             onChange="return combo_change(this); OnSelText(this);"
	             onKeydown="return combo_keydown(this, event); OnSelText(this);"
	             onKeypress="return combo_keypress(this, event);"
	             onKeyup="return combo_keyup(this, event);">
                    <option value="0" selected>Enter License Plate Number
                    <option value="63000"

               	    >Unknown
                    <option value="63001"

               	    >ABCD1012
                </select>

            </td>
        </tr>

        <tr class="item" height="28">
            <td width="350">&nbsp;</td>
            <td width="425">&nbsp;</td>
        </tr>

        <tr class="item" height="28">
            <td width="350">&nbsp;</td>

            <td width="425">&nbsp;</td>
        </tr>

        <tr class="item" height="28">
            <td width="350">&nbsp;</td>
            <td width="425">&nbsp;</td>
        </tr>

        <tr class="item" height="28">
            <td width="350">&nbsp;</td>

            <td width="425">&nbsp;</td>
        </tr>

        <tr class="item" height="28">
            <td width="350">&nbsp;</td>
            <td width="425">&nbsp;</td>
        </tr>

        <tr class="item" height="28">
            <td width="350">&nbsp;</td>

            <td width="425">&nbsp;</td>
        </tr>

        <tr class="item" height="28">
            <td width="350">&nbsp;</td>
            <td width="425">&nbsp;</td>
        </tr>

        <tr class="item" height="28">
            <td width="350">&nbsp;</td>

            <td width="425">&nbsp;</td>
        </tr>

        <tr class="item" height="28">
            <td width="350">&nbsp;</td>
            <td width="425">&nbsp;</td>
        </tr>

        <tr class="item" height="28">
            <td width="350">&nbsp;</td>

            <td width="425">&nbsp;</td>
        </tr>

    
		</tbody>
		</table>
	</div>

		<input type="hidden" id="ntakes"  name="ntakes"  value="5">
		<input type="hidden" id="aatakes" name="aatakes" value="1">
		</td>

	</tr>	
</table>
</div>

Does this help you...
Todd

 

[tmcneil]

Well, I've looked into this further after pounding my head against the wall.... ;-0 and discovered something. The combo_word variable will store the " " (space) when the spacebar is pressed (char code of 32).

if (c == 32) // if space bar pressed, add an empty space
    if (navigator.appName=="Netscape")  // FF
	combo_word += " ";  // combo_word stores empty space

At this point, combo_word has it and when it gets stored into, element.options[2].text, the space gets thrown away.

combo_word += String.fromCharCode(c);
element.options[2].text = combo_word;

I've noticed that if I do an alert on the, String.fromCharCode(c), then I'm not seeing the space character in FF. I'm wondering if this is the problem. IE has no problem with this code. I'll keep plugging away, but if anyone has any suggestions, please don't hesitate to post.

Todd

Todd

 

[tmcneil]

So, no one has any ideas...... I'm still stuck on this problem.

Todd

 

[monksnake]

Add &nbsp; instead of " ", I don't see why that shouldn't work.

I tried looking at your HTML that you posted above, there are javascript functions missing in order to see what is going on with your code.

<.

 

[tmcneil]

If I add a "&nbsp;" instead of a " ", then all it does is add &nbsp; to the text every time I hit the space bar. Let me see if I can dig up all the javascript. The thing is, it makes for a really long post and it's almost too much information.

 

[tmcneil]

here is the javascript:

/********************************************************************
* HTML ComboBox
* Copyright (C)2005 CS Wagner.
* This provides ComboBox functionality for HTML.
*********************************************************************
* HOWTO:
* You may use this on as many select elements as you want.
* For each select element, add the following three lines:
*   onfocus='javascript:return combo_focus(this);'
*   onchange='javascript:return combo_focus(this);'
*   onkeydown='javascript:return combo_keydown(this,event);'
*   onkeypress='javascript:return combo_keypress(this,event);'
*   onkeyup='javascript:return combo_keyup(this,event);'
* Also, make sure the first option is empty, as in:
*   <option value=''></option>
*********************************************************************
* HOW IT WORKS:
* This attempts to capture key presses and alter the value of the
* first option in the select list.  Doing so can be very complicated
* because every web browser seems to process key press events in a
* different way.
* Others have tried this and have hit common problems.  The ones that
* I know of, I have tried to handle:
* Backspace Problem:
*   When you hit backspace, you go to the previous web page.
*   I fixed this by cancelling the default backspace function.
* Auto-Selection of Options:
*   When you type the first letter of an option, the option is
*   selected automatically.
*   I fixed this by cancelling the default auto-select function.
* Edit of Existing Options:
*   Can user edit an option in the list?
*   When you edit while an option is selected, the edits replace the
*   first (editable) item in the list.
*********************************************************************
* COMPATABILITY:
* If the user does not have Javascript, this will not work.
* However, they will easily use the Select field with the values in
* the field.
* I have tried very hard to use Javascript that is common to all web
* browsers, so it will function to some degree for everyone.
*
* I have tested this with:
* Firefox 1.0.7: There is a bug in Firefox. When you set a select
*   box's index, it doesn't always update.  Also, when you cancel the
*   auto-select, it still auto-selects sometimes.
* Konqueror 3.5: This works fine.
* Internet Explorer 6.0: It is functional, but many keys do not work.
*   I have added work-arounds for all letter/number keys.
* Opera: I have tested it in the past and hitting backspace is always
*   treated as clicking the back button.
*********************************************************************/

var combo_word;	 //The user-editable word
var combo_keypress_called;	// A fix for Konqueror/Safari

// When select is focused, set the editable word.
function combo_focus(element)
{
    /*
    // original code for function combo_focus(element)
    combo_word = "";
	if(element.selectedIndex >= 0)
		combo_word = element.options[element.selectedIndex].text;
	return true;
	*/
	
    combo_word = "";
    
    if(element.selectedIndex >= 0)
	{
	    combo_word = element.options[element.selectedIndex].text;
	    // create arList array
        var arList = [];
        var frm = document.forms[0];
        for (var i=0; i<frm.elements.length; i++)
            //look for all select elements
            if (frm.elements[i].tagName == 'SELECT')
                // look for all select elements with an attribute of "include" set to "true"
                if (frm.elements[i].getAttribute('include') == "true")
                {
                    var txt = frm.elements[i].options[frm.elements[i].selectedIndex].text;
                    // do not include "Enter.." or "Unknown" when building arList
                    if (!txt.match(/Enter|Unknown/g))
                        arList[arList.length] = txt;
                    else
                        if (document.forms[0].aatakes.value != 1)
                            arList[arList.length] = "";
                }
                document.forms[0].cbValues.value = arList.join(',');
    }
    //alert("cbValues: " + document.forms[0].cbValues.value);
    return true;
}

// Same function as focus, but here to make the HTML less confusing.
function combo_change(element)
{
    OnSelText(element); 
	return combo_focus(element);
}

// Return false to try and block built-in keydown functions.
function combo_keydown(element, event)
{
	var c=0;
	if(event.keyCode) c = event.keyCode;
	else if(event.charCode) c = event.charCode;
	else if (event.which) c = event.which;
	// Don't block the tab key
	if(c == 9) return true;

	// We have not called keypress yet.
	combo_keypress_called = false;
	return false;
}

// The real work.  Update the editable word and the select box.
function combo_keypress(element, event)
{
	// Do not call this again on keyup.
	combo_keypress_called = true;

	// Get the current key pressed.
	var c=0;
	if(event.keyCode) c = event.keyCode;
	else if(event.charCode) c = event.charCode;
	else if (event.which) c = event.which;
	// Don't block the tab key
	if(c == 9) return true;

	// Konqueror sends all alpha-characters in as upper case.
	// This converts them to lower case if shift is not pressed.
	if(!event.shiftKey)
	{
		if(c>=65 && c<=90) c+= 32;
		else if(c == 190) c = 46; // period
		else if(c == 189) c = 45; // minus sign
		else if(c == 187) c = 61; // equal sign
		else if(c == 192) c = 96; // backtick
		else if(c == 222) c = 39; // single quote
		else if(c == 186) c = 59; // ;
	}
	// IE doesn't send the numbers shifted.
	else
	{
		if(c == 48) c = 41;
		else if(c == 49) c = 33;
		else if(c == 50) c = 64;
		else if(c == 51) c = 35;
		else if(c == 52) c = 36;
		else if(c == 53) c = 37;
		else if(c == 54) c = 94;
		else if(c == 55) c = 38;
		else if(c == 56) c = 42;
		else if(c == 57) c = 40;
		else if(c == 187) c = 43; // plus sign
		else if(c == 189) c = 95; // underscore
		else if(c == 192) c = 126; // ~
		else if(c == 222) c = 34; // quotes
		else if(c == 186) c = 58; // :
	}

	// This is used to get char codes that don't show up properly.
	//if(c > 126) alert(c);

    // space bar works in IE, not in FF (char code 32)
	if(c >= 32 && c <= 126)	// Printable characters
	{
	    if ((c == 32) && (navigator.appName=="Netscape")) // if space bar pressed, add an empty space
	        combo_word += "&nbsp;";  // combo_word stores empty space

	    combo_word += String.fromCharCode(c); // removes spaces
		//element.options[2].value = combo_word;  // take_id will not be selected
		                                          // and default to 0
		element.options[2].text = combo_word;
		var combo_wlc = combo_word.toLowerCase();
		var combo_select = 2;
		for(i=1; i<element.options.length; i++)
		{
			combo_sel = element.options[i].text.toLowerCase();
			if(combo_wlc.length <= combo_sel.length)
			{
				combo_sel = combo_sel.substring(0, combo_wlc.length);
				if(combo_wlc == combo_sel)
					combo_select = i;
			}
		}
		element.selectedIndex = combo_select;
	}
	else if((c == 8 || c == 4099) && combo_word.length>0)	// Backspace
	{
		combo_word = combo_word.substring(0, combo_word.length-1);
		//element.options[2].value = combo_word;  // take_id will not be selected
		                                          // and default to 0
		element.options[2].text = combo_word;
		element.selectedIndex = 2;
	}
	
    OnSelText(element);	
	combo_focus(element);  // Make sure combo_word is set after every keypress
	return false;
}

// Return false to try and block built-in keyup functions (like auto-select).
function combo_keyup(element, event)
{
	var c=0;
	if(event.keyCode) c = event.keyCode;
	else if(event.charCode) c = event.charCode;
	else if (event.which) c = event.which;
	// Don't block the tab key
	if(c == 9) return true;

	// If keypress was not called, call it now.
	if(!combo_keypress_called)
		return combo_keypress(element, event);
	return false;
}

Use it with the above post of the html code.

Thanks,
Todd