JSFiddle - React, Tailwind, and code Playground

by bcaswell

HTML

<div id="stock-results">
    <input name="quantity" type="text" value="test" />
</div>
<button>Focus Test 1</button>
<div id="stock-results-2">
    <input name="quantity" type="text" value="test" />
</div>
<button>Focus Test 2</button>

CSS

input {background-color:whitesmoke;padding:0 0.2em;line-height:1.7em;}

JavaScript

$("button:first").bind("click", function runFocusTest() 
{
    var inputEl = $('#stock-results input[name=quantity]:first');        
    $(inputEl).bind("focus", function() {
        $(this).css({ border: "solid 0.5em green", padding: "0 20px", lineHeight: "40px", outline: "0" });
    });
    $(inputEl).bind("blur", function() {
        $(this).css({ border: "auto", lineHeight: "auto", padding: "auto", outline: "auto" });
    });
    $(inputEl).focus();    
});

$("button:last").bind("click", function runFocusTest() 
{
        
    var inputE2 = $('#stock-results-2 input[name=quantity]:first');        
    $(inputE2).bind("focus", function() {
        $(this); //
    });
    $(inputE2).bind("blur", function() {
        $(this).css({ border: "auto", lineHeight: "auto", padding: "auto", outline: "auto" });
    });
    $(inputE2).focus().css({ border: "solid 0.5em green", padding: "0 20px", lineHeight: "40px", outline: "0" });
});