博客

如何在jQuery中使用input readonly属性

  • Post category:jquery

当我们将 input 元素的 readonly 属性赋值为 true 时，该元素将只读，用户不能编辑其内容，但是能够选择其中的文本和操作其中的表单控件。接下来我们将详细讲解如何在 jQuery 中使用该属性。

基本语法

首先，让我们来了解一下 readonly 属性的基本语法。在 HTML 中，我们可以通过如下方式设置 input 元素的 readonly 属性：

<input type="text" value="readonly" readonly>

在 jQuery 中，我们可以通过如下方式获取具有 readonly 属性的 input 元素：

var readOnlyInput = $('input[readonly]');

我们查找文档中所有拥有 readonly 属性的 input 元素时，可以使用 [] 操作符和属性选择器。

在上面的例子中，我们使用 $('input[readonly]') 选择器，这个选择器表明选择值为 readonly 的 input 元素。

示例说明

示例 1

以下是一个简单的例子，如何在 jQuery 中使用 readonly 属性和 val() 方法：

<input type="text" value="Nothing" readonly>
<br><br>
<button onclick="myReadOnlyFunction()">获取只读值</button>

<script>
function myReadOnlyFunction() {
  var x = $('input[readonly]').val();
  alert(x);
}
</script>

在这个例子中，我们创建了一个只读的 input 元素，然后创建了一个按钮，当我们点击按钮时，用 val() 方法获取 input 框的值。

示例 2

以下是另一个示例，如何在 jQuery 中给 readonly 元素添加样式：

<style>
.readonly {
  background-color: #f2f2f2;
  color: #aaa;
}
</style>

<input type="text" value="Only Read" readonly>
<br><br>
<button onclick="myBtnFunction()">添加样式</button>

<script>
function myBtnFunction() {
  $('input[readonly]').addClass('readonly');
}
</script>

在这个例子中，我们给只读的 input 元素添加了一个样式类。当我们点击按钮时，会以不同的背景颜色和文字颜色显示 input 框的内容。

希望这些例子能帮助你理解如何在 jQuery 中使用 readonly 属性。

Tags: