代码之家 › 专栏 › 技术社区 › stormdrain

而输入具有焦点

prototypejs javascript

stormdrain · 技术社区 · 15 年前

我有一个输入字段,当聚焦时会出现字段提示。问题是我使用的是原型效果,并有提示 Effect.toggle 如果有人在字段中键入,则返回空格,提示将全部返回。有没有一种方法可以在输入有焦点时设置var、case或其他可以设置的东西?

   function fieldHint(fieldName,cloneField){
        var hint = $(fieldName);
        var clone = $(cloneField);
        //only show fieldhint if input is empty
        if(clone.value==''){
            Effect.toggle(hint,'appear', { duration: 0.3 });
            //clone position of input box for fieldhint
            hint.clonePosition(clone,{
                offsetTop: 18,
                offsetLeft: 15,
                });
        }
    }
    function disableFieldHint(input,why,fieldName){
        var hint = $(fieldName);
        var input = $(input);
        var inputLength = input.value.length;
        if(why=='key' && inputLength<1){
            Effect.toggle(hint,'appear', { duration: 0.1 });
        }
        if(why=='blur' && inputLength<1){
            Effect.toggle(hint,'appear', { duration: 0.1 });
        }
    }

我通过onFocus调用fieldHint(),通过onBlur或onKeyDown调用disableFieldHint()。。。所以我认为这会让人感到困惑,因为onKeyDown最初是用来隐藏提示的,但是如果peeps type然后将所有内容退格,然后再次开始键入,onKeyDown+value=“”将为真,而且由于fieldHint()是一个切换,它将在人们键入时再次显示fieldHint,所有的东西都被零除——除非偷看,然后再退一步,再开始打字,然后所有的东西都离开了颠倒的世界——除非他们再退一步,再开始打字,然后都是fubar,就像相反的一天一样,持续几秒钟。

我知道我可以用 style.display 显示或隐藏提示,但淡出使我看起来更像我知道我在做什么(这显然是不正确的)。

谢谢你们,好先生们。

2 回复 | 直到 13 年前

stormdrain 15 年前

好啊多亏了贾斯汀·约翰逊的指导,这是我想出的火车残骸。。。我添加了一个基于模糊或键控设置的函数。。。然后添加了一个变量,表示人们之所以开始键入,是因为onkeydown检查仍然存在问题,因为如果他们正在键入并且在keydown上调用了disable,即使键入为true,它仍然会激活,因为调用它是为了隐藏初始keydown上的提示。。。嗯,不知道这是否有意义。

无论如何,它会检查它是否是初始的keydown,如果是,它会隐藏提示,如果不是,它不会隐藏提示(因为它已经隐藏,再次调用hide会显示它[thx TOGGLE!])。它还可以防止在有人再次键入后空格后再键入时再次出现显示提示。。。。胡特

    typing = '';
function isTyping(areThey){
    if(areThey == 'TRUE'){
        typing = 'TRUE';
    }else{
        typing = '';
    }
}

frst=0;
function fieldHint(fieldName,cloneField){
    var hint = $(fieldName);
    var clone = $(cloneField);

    //only show fieldhint if input is empty
    if((clone.value=='') && (typing != 'TRUE') && (frst==0)){
        frst = 1;
        Effect.toggle(hint,'appear', { duration: 0.3 });
        //clone position of input box for fieldhint
        hint.clonePosition(clone,{
            offsetTop: 18,
            offsetLeft: 15,
            });
    }
}

function disableFieldHint(input,why,fieldName){
    var hint = $(fieldName);
    var input = $(input);
    var inputLength = input.value.length;
    if(why=='key'){
        switch(typing){
            case 'TRUE':
                if((inputLength<1) && (frst==1)){
                    Effect.toggle(hint,'appear', { duration: 0.1 });
                    frst = 0;
                }
        }
    }
    if((why=='blur')&&(typing=='TRUE')&&(frst==1)){
        Effect.toggle(hint,'appear', { duration: 0.1 });
    }
    if((why=='blur')&&(typing=='')&&(frst==0)){
        Effect.toggle(hint,'appear', { duration: 0.1 });
    }
}

Justin Johnson 15 年前

我会在什么时候挂一面旗 onKeyDown 已被解雇,并为其清除 onBlur fieldName.hasStartedInput = true . 这样,您可以在尝试显示提示之前检查标志,如果为真,则不显示提示。

编辑: 寻址您发布的新代码。这是一个有点复杂和重复,所以我已经削减了一点给你。我没有你所有的代码,所以我不能很明显地测试它,但你至少应该能够得到这个想法。

var typing = false, first = false;

function isTyping(areThey) {
    typing = areThey;
}

function fieldHint(fieldName, cloneField) {
        var hint  = $(fieldName);
        var clone = $(cloneField);

        // only show fieldhint if input is empty
        if ( clone.value == '' && !typing && !first ) {
                first = true;
                Effect.toggle(hint, 'appear', { duration: 0.3 });
                //clone position of input box for fieldhint
                hint.clonePosition(clone, {
                        offsetTop: 18,
                        offsetLeft: 15,
                });
        }
}

function disableFieldHint(input, why, fieldName) {
    var hint = $(fieldName);
    if ( why == 'key' && typing && first && $(input).value.length == 0 ) {
        Effect.toggle(hint, 'appear', { duration: 0.1 });
        first = false;
    }
    else if ( why == 'blur' && typing == first ) {
        Effect.toggle(, 'appear', { duration: 0.1 });
    }
}

关键是 不要忘记JavaScript有真正的布尔类型 ,表示您可以使用 true 和 false 不 0 和 1 或 "TRUE" 和 "FALSE" isTyping() “对” “假” .