第1步：http://www.nnllok.cn/Read.aspx?id=466
第2步：http://www.nnllok.cn/Read.aspx?id=467
again：http://www.nnllok.cn/Read.aspx?id=468
第3步：http://www.nnllok.cn/Read.aspx?id=469
第4步：http://www.nnllok.cn/Read.aspx?id=470
------------------------------------------------------
14:55 2010/11/29 死循环解决。。。
就在InputSelectBlur的开头，在判断是不是从input转到select的时候出错的，被我注释掉的方法才是正确的，后来写的，会搞到焦点一直在原来的input上，无法转移，然后呢，如果直接在两个input之间切换，焦点就会来回转啊转啊，没有办法转出去了
换成这个正确：
function InputSelectBlur()
{
//检查上一个激活的控件是否input
var isLastActiveObjInput = false;
var inputArrayLength = wordInputArray.length;
for(var inputIndex = 0; inputIndex < inputArrayLength; inputIndex++)
{
if(lastActiveObjId == wordInputArray[inputIndex].id)
{
isLastActiveObjInput = true;
}
}
//获取当前激活的input控件
var nowInputIndex = GetNowInputIndex();
if(isLastActiveObjInput && activeObjId == wordSelectObj.id)
{
//焦点从input转到select，显示select
if(wordSelectDivObj.style.display == "none") wordSelectDivObj.style.display = "block";
//焦点设置到当前的input
wordInputArray[nowInputIndex].focus();
}
else
{
..............
}
}
------------------------------------------------------
我把input和select分开了，准备做两个控件，一个是input的，一个是select
脚本上，我用数组记录每一个input，在onfocus时记录当前input的id
就是，我现在的脚本，进入死循环了吗？运行页面的时候，第1次录入的数据是正确的，就是，当焦点转移到下一个控件，页面会死掉。。。
先记录现在的，我要继续大动大动，护士长，给我15号刀，爷爷的，我要切到你妈妈不认识你
把select部分提取出了PhonicsSelect控件，这个不用记录了，从上一版本提取出来的
Phonics.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Phonics.aspx.cs" Inherits="Test_Phonics" %>
<%@ Register Src="PhonicsSelect.ascx" TagName="PhonicsSelect" TagPrefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
</head>
<body id="myBody">
<form id="form1" runat="server">
<div>
字符串：<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="把字符串中的汉字转为拼音" OnClick="Button1_Click" />
</div>
<div style="padding-top:32px;">
<script type="text/javascript">
var wordInputArray = new Array();
var wordValueArray = new Array();
</script>
主队：
<asp:TextBox ID="TbWord" runat="server" AutoCompleteType="Disabled"></asp:TextBox>
<asp:HiddenField ID="HfWord" runat="server" Value="0" />
<script type="text/javascript">
wordInputArray[0] = document.getElementById("<% =TbWord.ClientID %>");
wordValueArray[0] = document.getElementById("<% =HfWord.ClientID %>");
</script>
客队：
<asp:TextBox ID="TbAwayHome" runat="server" AutoCompleteType="Disabled"></asp:TextBox>
<asp:HiddenField ID="HfAwayHome" runat="server" Value="0" />
<script type="text/javascript">
wordInputArray[1] = document.getElementById("<% =TbAwayHome.ClientID %>");
wordValueArray[1] = document.getElementById("<% =HfAwayHome.ClientID %>");
</script>
<asp:Button ID="Button2" runat="server" Text="获取选中的值" OnClick="Button2_Click" />
<uc1:PhonicsSelect ID="PhonicsSelect1" runat="server" />
<br />可用测试数据：
<asp:SqlDataSource ID="SdsTest" runat="server" ConnectionString="<%$ ConnectionStrings:db_zhibo %>" SelectCommand="select PID, Word, Phonics from Test_Phonics order by Phonics"></asp:SqlDataSource>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SdsTest">
<Columns>
<asp:BoundField DataField="PID" HeaderText="PID" />
<asp:BoundField DataField="Word" HeaderText="Word" />
<asp:BoundField DataField="Phonics" HeaderText="Phonics" />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
phonics.js
//定义全局变量，记录整个页面当前有焦点的可录入控件的id，这个值用于隐藏select时的判断
var activeObjId = "", lastActiveObjId = "", activeInputObjId = ""
var wordCount = 0;
//可用数组由PhonicsInput.ascx定义：wordInputArray, wordValueArray
//固定客户端控件由PhonicsSelect.ascx定义
var wordSelectObj = document.getElementById("wordSelect");
var wordSelectDivObj = document.getElementById("wordSelectDiv");
//利用activeObjId，控制select的显示和隐藏
function ShowHideSelect()
{
var myForm = document.forms[0];
var objType = ",text,select-one,select-multiple,checkbox,radio,file,";
var inputArrayLength = wordInputArray.length;
//记录当前循环中的控件id
var nowElementId = "";
//记录当前循环中的控件，是否不是input，也不是select
var isOtherObj = true;
//开始循环页面上的每一个控件
for(var i = 0; i < myForm.length; i++)
{
if(objType.indexOf(myForm.elements[i].type) == -1) continue;
//当前循环到的控件id
nowElementId = myForm.elements[i].id;
//给select添加事件
if(nowElementId == wordSelectObj.id)
{
isOtherObj = false;
//点选一项时，选择这一项
myForm.elements[i].onclick = function() { SetInputValue(); }
//记录上一个激活的控件、当前激活的控件，显示select
myForm.elements[i].onfocus = function() { InputSelectFocus(this.id); }
//如果焦点不是从input转到select的，隐藏slect
myForm.elements[i].onblur = function() { InputSelectBlur(); }
//循环下一个控件
continue;
}
//循环wordInputArray，给每一个input控件添加onkeyup、onkeydown、onclick、onfocus、onblur事件
for(var inputIndex = 0; inputIndex < inputArrayLength; inputIndex++)
{
if(nowElementId == wordInputArray[inputIndex].id)
{
isOtherObj = false;
//输入数据时，根据当前数据重新设置新的选项
myForm.elements[i].onkeyup = function() { ChangeOption(); }
//控制上下箭头、回车
myForm.elements[i].onkeydown = function() { SelectOption(); }
//给input添加onclick显示select，防止用户用箭头和回车选择一项后，重新点击鼠标要显示select再次选择
myForm.elements[i].onclick = function() { ShowSelect(); }
//记录上一个激活的控件、当前激活的控件，显示select
myForm.elements[i].onfocus = function() { InputSelectFocus(this.id); }
//如果焦点不是从input转到select的，隐藏slect
myForm.elements[i].onblur = function() { InputSelectBlur(); }
}
}
if(isOtherObj)
{
myForm.elements[i].onfocus = function()
{
lastActiveObjId = activeObjId;
activeObjId = this.id;
}
}
}
}
//记录上一个激活的控件、当前激活的控件、当前激活的input控件，隐藏select
function InputSelectFocus(thisId)
{
lastActiveObjId = activeObjId;
activeObjId = thisId;
if(activeObjId != wordSelectObj.id) activeInputObjId = thisId;
if(wordSelectDivObj.style.display == "none") wordSelectDivObj.style.display = "block";
};
//
function InputSelectBlur()
{
//检查上一个激活的控件是否input
//var isLastActiveObjInput = false;
//for(var inputIndex = 0; inputIndex < inputArrayLength; inputIndex++)
//{
// if(lastActiveObjId == wordInputArray[inputIndex].id)
// {
// isLastActiveObjInput = true;
// }
// if(activeObjId == wordInputArray[inputIndex].id)
// {
// nowInputIndex = inputIndex;
// }
//}
//获取当前激活的input控件
var nowInputIndex = GetNowInputIndex();
//if(isLastActiveObjInput && activeObjId == wordSelectObj.id)
if(nowInputIndex != -1)
{
//焦点从input转到select，显示select
if(wordSelectDivObj.style.display == "none") wordSelectDivObj.style.display = "block";
//焦点设置到当前的input
wordInputArray[nowInputIndex].focus();
}
else
{
//隐藏select
if(wordSelectDivObj.style.display == "block")
{
wordSelectDivObj.style.display = "none";
if(wordInputArray[nowInputIndex].value == "")
{
//没有录入数据
wordValueArray[nowInputIndex].value = "0";
}
else
{
//根据录入的数据，设置最后的录入值，保证值在选项中肯定存在
if(wordCount == 0)
{
wordInputArray[nowInputIndex].value = "";
wordValueArray[nowInputIndex].value = "0";
}
else
{
wordInputArray[nowInputIndex].value = wordSelectObj.options[0].text;
wordValueArray[nowInputIndex].value = wordSelectObj.options[0].value;
}
}
}
}
}
//显示select
function ShowSelect()
{
if(wordSelectDivObj.style.display == "none") wordSelectDivObj.style.display = "block";
}
function addLoadEvent(func)
{
var oldonload = window.onload;
if(typeof window.onload != 'function') { window.onload = func; }
else { window.onload = function() { oldonload(); func(); } }
}
addLoadEvent(ShowHideSelect);
//获取当前激活的控件
function GetNowInputIndex()
{
var nowInputIndex = -1;
var inputArrayLength = wordInputArray.length;
for(var inputIndex = 0; inputIndex < inputArrayLength; inputIndex++)
{
if(activeInputObjId == wordInputArray[inputIndex].id)
{
nowInputIndex = inputIndex;
break;
}
}
return nowInputIndex;
}
//点击select选择一项时，设置这一项的值到input
function SetInputValue()
{
//获取当前激活的input控件
var nowInputIndex = GetNowInputIndex();
wordInputArray[nowInputIndex].value = wordSelectObj.options[wordSelectObj.selectedIndex].text;
wordValueArray[nowInputIndex].value = wordSelectObj.options[wordSelectObj.selectedIndex].value;
wordSelectDivObj.style.display = "none";
}
//如果在input里按了上箭头，select选上一项；按了下箭头则选下一项，按了回车则选中项
function SelectOption()
{
//获取录入的键盘值：上箭头38、下箭头40、回车13
if(window.event) e = window.event;
var nowKeyCode = e.charCode || e.keyCode || e.which;
if(nowKeyCode != 38 && nowKeyCode != 40 && nowKeyCode != 13) return;
var activeIndex = wordSelectObj.selectedIndex;
if(nowKeyCode == 13)
{
//回车
SetInputValue();
//终止提交表单
e.returnValue = false;
}
else if(nowKeyCode == 38)
{
//上箭头，如果当前项是第一项，选择最后一项
if(activeIndex == 0) activeIndex = wordCount;
activeIndex = activeIndex - 1;
}
else
{
//下箭头，如果当前项是最后一项，选择第一项
if(activeIndex == wordCount - 1) activeIndex = -1;
activeIndex = activeIndex + 1;
}
//设置选项
wordSelectObj.selectedIndex = activeIndex;
}
//按input里录入的数据，修改select中的选项，加入数组中符合条件的选项，修改选项总和：wordCount
var lastText = "";
function ChangeOption()
{
//获取录入的键盘值：上箭头38、下箭头40、回车13
if(window.event) e = window.event;
var nowKeyCode = e.charCode || e.keyCode || e.which;
if(nowKeyCode == 38 || nowKeyCode == 40) return;
var firstIndex = -1;
var nowText, inputText;
//获取当前激活的input控件
var nowInputIndex = GetNowInputIndex();
//当前录入值
lastText = inputText;
if(nowInputIndex == -1) return;
inputText = wordInputArray[nowInputIndex].value;
if(lastText == inputText || inputText == "") return;
//从数组中读取和当前录入值开头吻合的项加入或去除
if(inputText.indexOf(lastText) == -1)
{
//全新录入，数据项全部删除后重新添加
wordSelectObj.options.length = 0;
wordCount = 0;
for(var index = 0; index < arrayLength; index++)
{
if(wordArray[index].indexOf(inputText) == 0 || phonicsArray[index].indexOf(inputText) == 0)
{
wordSelectObj.options[wordCount] = new Option (wordArray[index], wordIdArray[index]);
wordCount++;
}
}
if(wordCount == 0)
{
wordSelectObj.style.height = "0px";
}
if(wordCount > 5)
{
wordSelectObj.style.height = "84px";
}
else
{
wordSelectObj.style.height = eval((wordCount + 1) * 14) + "px";
}
}
}