Search code examples
htmlinputonbluronfocus

HTML input onfocus and onblur

I am trying to get an input text field to have a thick blue border around it when it is in focus and then to default back to its normal default border when it is no longer in focus. One of my input fields is defined like so:

<input onfocus="this.style.border='2px solid #003366';" onblur="this.style.border='';" name="attorneyName" id="attorneyName" type="text" value="John Jackson" size="50" maxlength="30">

This correctly puts a blue border around it when it is on focus, but when it is no longer in focus, it loses the default text field altogether. None of the input text field borders are defined; their style is the default style for such fields and I would simply like to make it revert to this style after it loses focus.

Solution

  • Instead of directly modifying the style attribute with the JavaScript, instead add, and remove, a class-name, and use CSS to define the class:

    .newInputClass {
    border: 2px solid #003366;
}

    And, in the HTML:

    <input onfocus="this.className = 'newInputClass';" onblur="this.className = '';" name="attorneyName" id="attorneyName" type="text" value="John Jackson" size="50" maxlength="30">