JSFiddle - React, Tailwind, and code Playground

by stic_k

HTML

<div class="block">
  <input type="text" class="vin">
  <p class="out"></p>
</div>

CSS

.block {
  width: 100%;
  height: 100vh;
  background: #ccc;
  padding-top: 100px;
}

.vin { 
  display: block;
  margin: 0 auto;
  width: 200px;
  height: 40px;
  outline: none;
}

JavaScript

$('.vin').keyup(function() {
var $this = $(this);
var maxLen = 17;
$this.val($(this).val().toUpperCase());
    if($this.val().length > maxLen){
      $this.val($this.val().substr(0, maxLen));	
      $this.css('border','3px solid green');
      return false;
    } 
    else{
       $this.css('border','3px solid red');
    }
});

$('.vin').on("keypress", function(e) {
  var char = /["a-zA-Z0-9]/;
  var val = String.fromCharCode(e.which);
  var test = char.test(val);
  if(!test){
  	$('.out').text('Переключите раскладку');
    return false;
  }
  else{
  	$('.out').text('');
  }
});