Phân biệt thuộc tính Readonly và Disabled

Cả hai thuộc tính đều ngăn người dùng chỉnh sửa nội dung trong form, nhưng phạm vi áp dụng khác nhau. Readonly chỉ có hiệu lực với input[type="text"], input[type="password"] và textarea, trong khi Disabled hoạt động trên mọi phần tử form như select, radio, checkbox, button.

Thuộc tính lastIndex của biểu thức chính quy trong JavaScript

lastIndex là vị trí bắt đầu tìm kiếm tiếp theo (tính từ 0) khi sử dụng cờ toàn cục g. Mỗi lần gọi test() hoặc exec(), giá trị này thay đổi. Nếu không đặt lại, kết quả có thể bị xen kẽ đúng/sai.

var pattern = /dog/g, text = "dog";
var btn = document.getElementById("checkBtn");
btn.addEventListener("click", function() {
  console.log(pattern.test(text)); // true, false, true, ...
  pattern.lastIndex = 0;           // reset
});

Biểu thức khớp ký tự tiếng Trung: /[\u4e00-\u9fa5]/

Căn giữa theo chiều dọc với chiều cao không cố định

Có thể sử dụng Flexbox, CSS Grid hoặc kết hợp transform. Ví dụ đơn giản:

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

Căn chỉnh checkbox với nhãn văn bản

input[type="checkbox"] {
  vertical-align: middle;
  margin-top: 0;
  margin-right: 4px;
}
label {
  font-family: Tahoma;
}

Chọn tất cả checkbox bằng jQuery

$("#selectAll").on("change", function() {
  $("input[type='checkbox']").prop("checked", this.checked);
});

Chuyển đổi giữa các hệ cơ số

function convertBase(value, fromBase, toBase) {
  return parseInt(value.toString(), fromBase).toString(toBase);
}
// Ví dụ: convertBase('ff', 16, 2) → '11111111'

Chuyển đổi màu hex sang rgb

function hexToRgb(hex) {
  hex = hex.replace('#', '');
  if (hex.length === 3) {
    hex = hex.split('').map(c => c + c).join('');
  }
  var r = parseInt(hex.substring(0,2), 16);
  var g = parseInt(hex.substring(2,4), 16);
  var b = parseInt(hex.substring(4,6), 16);
  return 'rgb(' + r + ',' + g + ',' + b + ')';
}

Xác thực biểu mẫu (form validation)

$("input[data-required]").on("blur", function() {
  var $field = $(this);
  var $parent = $field.parent();
  $parent.find(".validation-msg").remove();

  if ($field.hasClass("fullname")) {
    if ($field.val().length === 0 || $field.val().length > 6) {
      $parent.append("<span class='validation-msg error'>Tên tối đa 6 ký tự, không được để trống</span>");
    } else if (/\d|\s/.test($field.val())) {
      $parent.append("<span class='validation-msg error'>Tên không chứa số hoặc khoảng trắng</span>");
    } else {
      $parent.append("<span class='validation-msg success'>Hợp lệ</span>");
    }
  }

  if ($field.hasClass("phone")) {
    if (!/^\d{7,12}$/.test($field.val())) {
      $parent.append("<span class='validation-msg error'>Số điện thoại từ 7 đến 12 chữ số</span>");
    } else {
      $parent.append("<span class='validation-msg success'>Hợp lệ</span>");
    }
  }
});

$("#saveBtn").on("click", function() {
  $("input[data-required]").trigger("blur");
  if ($(".validation-msg.error").length > 0) {
    return false;
  }
  alert("Lưu thành công");
});

Flexbox tương thích nhiều trình duyệt

.flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.flex-column {
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.flex-1 {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.flex-middle {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.flex-center {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.flex-between {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

Áp dụng:

<div class="flex flex-between">
  <div class="flex-1">Mục A</div>
  <div class="flex-1">Mục B</div>
  <div class="flex-1">Mục C</div>
</div>

Ngăn chặn kéo thả mặc định của trình duyệt

document.addEventListener('dragstart', function(e) {
  e.preventDefault();
});