while input has focus

Question

Hi.

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".

Answer 2

OK.. thanks to the direction of Justin Johnson, this is the trainwreck I came up with... I added a function that gets set based on blur or keydown... then added a var to say people had started typing because there still was an issue with the onkeydown check because if they were typing and the disable was called on keydown, even if typing was true, it would still activate cuz it is called to hide the hint on the initial keydown... Uhhh, no idea if that made sense.

Anyway, so it checks if it is the initial keydown, if it is it hides hint, if not doesn't hide it (because it's already hidden, and to call the hide again would show it [thx TOGGLE!]). It also prevents the show hint from coming up again if someone types then backspaces then types again.... wut

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