JSFiddle - React, Tailwind, and code Playground

by hescano

HTML

<table border="0" cellpadding="0" cellspacing="0">
<tbody><tr><td>
<input id="searchbox" size="25" maxlength="100" placeholder="search..." name="Search" onkeyup="doSearch(event)" type="text" />&nbsp;
<input class="button_searchbox" value="Search" type="button" />
</td></tr></tbody>
</table>
<div id="divPopup">You must enter at least 3 characters when searching...</div>

CSS

#divPopup
{
    color: grey;
    font-family: Verdana;
    font-size: 10px;
    border: 1px solid black;
    width: 200px;
    display: none;
}

JavaScript

doSearch = function(event)
{
    var keycode;
    if (window.event) { keycode = window.event.keyCode; }
    else if (e) { keycode = e.which; }
    else { return false; }
    
    if (keycode == 13) 
    {
        if (this.searchbox.value.length > 2)
        {
            console.log("Searching...");
        }
        else
        {
            document.getElementById("divPopup").style.display = "block";
        }
    }
    else 
    {
        document.getElementById("divPopup").style.display = "none";
        return false; 
    }
}