JSFiddle - React, Tailwind, and code Playground

by nikolya223

HTML

<div id="searchWrap_lvl2"><input type="text" name="search_field" id="keywords" value="Поиск" onBlur="clearSearch_field_blur();" onClick="clearSearch_field_click()" ></div>
<script type="text/javascript">
    $('#keywords').onClick(){
    clearSearch_field_click();    
    }
    $('#keywords').onBlur(){
    clearSearch_field_blur();    
    }   
    function clearSearch_field_blur(){
        var search_fieldVal =  document.getElementById('keywords');    
        if (search_fieldVal.value ==""){        
       search_fieldVal.value = "Поиск";
        } 
    }
    function clearSearch_field_click(){
        var search_fieldVal =  document.getElementById('keywords');    
        if (search_fieldVal.value =="Поиск"){        
       search_fieldVal.value = "";
        } 
    }
</script>

CSS

#searchWrap_lvl2 {
        
        border: 1px solid #ccc;
        display: inline;
        padding-left: 35px;
        padding-bottom: 7px;
        padding-top: 5px;
        padding-right: 2px;
        border-radius: 4px;
        background: url(../images/images.jpg) no-repeat;
}
#keywords{
        border: 0px;
        height: 25px;
        width: 350px;
        color: grey; 
        
}