JSFiddle - React, Tailwind, and code Playground

HTML

<input id="site_name" name="name" type="text" maxlength="32" />
<br><br>
<div id="result"></div>

CSS

#site_name{
    border:1px solid #333;
}

JavaScript

$('#site_name').bind("keydown keyup", function(){
    
    $(this).val($(this).val().replace(/^\s+/g,''));
    $(this).val($(this).val().replace(/\b\s+\b/g,' '));
    
});

$('#site_name').bind("focusout mouseleave",function() {
    
        $(this).val($(this).val().replace(/\s+$/g,''));
        
        $(this).val($(this).val().replace(/[^\w_\sа-яё-]/ig,''));
        
        $('#result').text($(this).val());   
});