博客

如何用jQuery使一个文本输入不可编辑

  • Post category:jquery

当我们需要在网页中展示一些文本内容时，有时会希望这些文本内容不可编辑，这时候可以通过使用jQuery实现此功能。下面是一些关于如何使用jQuery使一个文本输入不可编辑的攻略和示例说明。

Step 1：添加jQuery库

在使用jQuery库前，先要在网页中添加jQuery库。我们可以通过以下代码在网页中添加jQuery库：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

该代码会在网页中引入jQuery的库文件，后续使用jQuery的方法都需要在该文件基础上进行。

Step 2：禁用文本输入框

当我们需要禁用文本输入框时，可以通过 .prop() 方法来实现该功能。该方法可以获取或设置指定属性的值，我们可以通过设置 readonly 属性来禁用文本输入框。代码如下：

$('#input-id').prop('readonly', true);

上述代码中，#input-id 是指定的文本输入框的id，通过调用 .prop() 方法并设置 readonly 属性为 true 来使该文本框不可编辑。

Step 3：禁用文本域

当我们需要禁用文本域时，可以通过 .attr() 方法来设置 readonly 属性。代码如下：

$('#textarea-id').attr('readonly', 'readonly');

上述代码中，#textarea-id 是指定的文本域的id，通过调用 .attr() 方法并设置 readonly 属性为 readonly 来使该文本域不可编辑。

示例说明

示例 1：禁用文本输入框

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>禁用文本输入框</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(function(){
            $('#input1').prop('readonly', true);
            $('#input2').prop('disabled', true);
        });
    </script>
</head>
<body>
    <input type="text" id="input1" value="该文本输入框已被禁用"><br>
    <input type="text" id="input2" value="该文本输入框同样被禁用"><br>
</body>
</html>

上述代码运行后，将会禁用两个文本输入框。

示例 2：禁用文本域

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>禁用文本域</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(function(){
            $('#textarea1').attr('readonly', 'readonly');
            $('#textarea2').attr('disabled', 'disabled');
        });
    </script>
</head>
<body>
    <textarea id="textarea1" rows="4" cols="50">该文本域已被禁用</textarea><br>
    <textarea id="textarea2" rows="4" cols="50">该文本域同样被禁用</textarea>
</body>
</html>

上述代码运行后，将会禁用两个文本域。

Tags: