Question

I have a text input area attached to a radio button in an HTML form as shown here:

    <fieldset class="w100">
                        <div class="rowElem align-left">
                          <input type="radio" id="plan_height" name="plan_height" value="standard6'2&quot;" checked >
                          <label>Standard 6'2"</label>
                        </div>
                        <div class="rowElem align-left">
                          <input type="radio" id="other_text" name="plan_height" value="Other height" onclick="document.getElementById('other_height').focus();" >
                          <input type="text" id="other_height" name="plan_height" value="Enter custom height" onFocus="if(this.value=='Enter custom height') this.value='';" onBlur="if(this.value=='') this.value='Enter custom height';">
                          <label for="other_text">Other</label>
                        </div>
                       </fieldset>

If the user selects the second radio option for “Other,” I would like the text box to automatically be in focus for them to enter a value. Also, if the user clicks on the text box to enter a value, I would like the radio button for this to automatically be selected for them.

I’ve tried using onBlur or onChange or onKeyup on the form element, but can’t seem to get it working.

Answer 1

Check this out http://jsfiddle.net/tzj6Z/7/

For cross browser support you’ll have to add broswer detection like this

if(navigator.userAgent.indexOf('Firefox')>=0) { // Firefox
  focus_event = 'focus';
} else if (navigator.userAgent.indexOf('Safari')) {  // Opera, Safari/Chrome
  focus_event = 'DOMFocusIn';
} else {  // IE
  focus_event = 'onfocusin';
}