Google sheet, apps script Định dạng dấu phân cách hàng ngàn cho input

giaoanppt

4 tháng trước

Mình chia sẻ đến các bạn một project nhỏ trên nền tảng Google sheet và apps script, đó là “Định dạng dấu phân cách hàng ngàn cho input“. Với code này, khi bạn nhập giá trị số vào thì nó sẽ tự động thêm dấu phẩy phân cách hàng ngàn cho dãy số của bạn. Cách thức này khá thú vị để bạn tích hợp vào các form nhập liệu của mình.

Bạn tìm những project trong bộ sưu tập tại đây.

Các bạn xem những project ngẫu nhiên:

XEM VIDEO DEMO CHO PROJECT NÀY

Code apps script trang “Code.gs”

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index');
}

Code apps script trang “Index.html”

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <style>
    body {
      font-family: Arial, sans-serif;
      width: 800px;
      border: 1px solid blue;
      border-radius: 15px;
      box-shadow: 2px 2px 3px blue;
      padding: 10px;
      margin-left: auto;
      margin-right: auto;
    }

    .title{
      font-size: 1.2em;
      color: red;
      font-weight: bold;
      text-align: center;
      padding: 5px;
      margin-bottom: 10px;
    }

    label{
      font-size: 1em;
      font-weight: bold;
    }

    input{
      border: 1px solid red;
      border-radius: 8px;
      width: 80%;
      padding: 8px;
    }
    </style>
</head>
<body>
  <div class="title"> Kiểu nhập số và có dấu phân cách tự động trên webapp</div>
  <label>Nhập số: </label>
  <input type="text" class="numberInput" placeholder="Nhập số">
 

  <script>
    //Format number input
         document.querySelectorAll('.numberInput').forEach(input => {
            input.addEventListener('input', () => {
                let value = input.value.replace(/,/g, ''); // Loại bỏ dấu phẩy cũ
                if (/^\d*$/.test(value)) { // Kiểm tra chỉ cho phép nhập số
                    input.value = Number(value).toLocaleString('en-US');
                } else {
                    input.value = value.replace(/[^\d]/g, ''); // Loại bỏ ký tự không phải số
                }
            });
        });
  </script>
</body>
</html>