input+select输入汉字或拼音快速选择数据第3步,死循环了? - 死循环已解决 - ASP.NET(webform) - 狼子收集
首页蓝耳朵|小小蓝耳朵广州图书馆外文室英语儿童读物资源介绍网佛教青年之友旧版收集永硕E盘Phonics Short Vowels Game 
input+select输入汉字或拼音快速选择数据第3步,死循环了? - 死循环已解决
所属栏目:ASP.NET(webform)  时间:2010-11-29 14:41  作者:狼子

第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";
        }
    }
}

小楼宝宝的涂鸦花花(Imitater)的博客起名称骨测字