Question

I have an input field that has a field hint that comes up when focused. The problem is that I am using prototype effects and have the hint Effect.toggle ‘ing, and if someone types in the field, then backspaces, the hint gets all backwards. Is there a way to set a var or case or something that can be set while the input has focus?

   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 });
        }
    }

I call the fieldHint() via onFocus and call disableFieldHint() via either onBlur or onKeyDown… So I think it’s getting confused because onKeyDown works initially to hide the hint, but if peeps type then backspace everything, then start typing again, that onKeyDown + value=”” will be true, and since fieldHint() is a toggle, it will show the fieldhint again while people are typing, and everything is divided by zero – unless peeps then backspace again and start typing again, then everything leaves upside down world – unless they backspace again and start typing again, then it’s all fubar and like opposite day for a few seconds.

I understand that I could just use style.display to show or hide the hint, but the fades make me look much more like I know what I’m doing (which is obviously not true).

Thank you kindly, good Gentlemen.

Answer 1

I would set a flag when onKeyDown is fired, and clear it for onBlur, something like fieldName.hasStartedInput = true. This way, you can check the flag before you try show the hint and if it is true, don’t show the hint.

Edit: Addressing the new code that you posted. It’s a little convoluted and repetitive, so I’ve trimmed it down a little for you. I don’t have all of your code, so I can’t test it obviously, but you should at least be able to get the idea.

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 });
    }
}

The big point is don’t forget that JavaScript has real boolean types, meaning that you can use true and false, not 0 and 1, or "TRUE" and "FALSE". With that said, you’ll have to update in your own code wherever isTyping() is called and make sure that you are passing in a boolean type, not the string "TRUE" or "FALSE".