表单输入字段只读角 - Javascript

表单的输入字段是网站与用户连通的一个重要途径。但在一些场景中，需要控制用户输入的权限，只读角是一个比较常见的需求。本文将介绍如何通过Javascript实现表单输入字段只读角的实现。

HTML

首先，需要在HTML中设置input标签的readonly属性。

<input type="text" name="username" readonly>

Javascript

1. 通过DOM设置

通过DOM设置input标签的readonly属性为true即可实现只读角。

document.getElementsByName("username")[0].readOnly = true;

2. 通过jQuery设置

通过jQuery设置input标签的readonly属性为true也非常简单。

$('input[name="username"]').prop('readonly', true);

注意事项

需要注意的是，只读字段并不会阻止用户复制其中的文本内容。如果需要禁止用户复制，可以加上以下CSS样式。

input[readonly] {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

综上所述，通过设置input标签的readonly属性和加上一些必要的样式，即可实现表单输入字段只读角。