JSFiddle - React, Tailwind, and code Playground

by shijilt

HTML

<div class="content">
    <div class="content mb-0 mt-3">
    <div class="row mb-0">
    <div id="add-product">
    	<table cellpadding="10" cellspacing="1">
    		<tbody>
                <tr>
    				<th><h6 class="font-14"><strong>Number</strong></h6></th>
    				<th><h6 class="font-14"><strong>Count</strong></h6></th>
    			</tr>
    			<tr>
            <td contentEditable="true" inputmode="numeric" data-id="lot_number_3" data-length="3" class="test"><h3 class="color-green-dark mb-0"></h3></td>
            <td contentEditable="true" inputmode="numeric" data-id="lot_count_3"data-length="3" class="test"><h3 class="color-red-dark mb-0">1</h3></td>
    			</tr>
    		</tbody>
    	</table>
    	
    
    </div>
    
    </div>
    </div>
    
    </div>

CSS

#add-product table{width:100%;background-color:#F0F0F0;}
#add-product table th{text-align: center;}
#add-product table td{background-color:#FFFFFF;border-bottom:#F0F0F0 1px solid;text-align: center;word-break: break-all;max-width: 10px;vertical-align: top;}
#list-product table{width:100%;}
#list-product table th{border-bottom:#F0F0F0 2px solid;text-align:left;}
#list-product table td{border-bottom:#F0F0F0 1px solid;text-align:left;word-break: break-all;max-width: 10px;vertical-align: top;}

JavaScript

$('td[contentEditable="true"]').on("keydown", e => {
      // define allowed keys
      const allow = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'Tab', 'Backspace']
      // get pressed key
      const k = e.key
      if (allow.includes(k)) {
        // get the value before this keydown
        const val = e.target.textContent
    
        // determine the limit according to your logic
        const limit = Number(e.target.dataset['length']);
    
        if (val.length == limit && 'Tab' != k && 'Backspace' != k) {
          // pressing this key would put the value over the limit
          e.preventDefault()
          console.log('deny: ' + k, val, limit)
        } else
          console.log('allow: ' + k, val, limit)
    
      } else {
        // key not allowed
        e.preventDefault()
        console.log('deny: ' + k)
      }
    
    })