js 使FORM表单的所有元素不可编辑的示例代码

js实现使FORM表单所有元素不可编辑的示例代码主要有以下三个步骤：

1. 获取FORM表单中所有表单元素
2. 遍历FORM表单中所有表单元素，将其属性设置为不可编辑
3. 阻止表单的默认提交行为

下面分别讲解每个步骤的实现方法。

第一步：获取FORM表单所有表单元素

在JS中，可以通过querySelectorAll()方法获取FORM表单中所有的表单元素，如下所示：

const form = document.querySelector('form');
const formElements = form.querySelectorAll('input, select, textarea');

通过querySelectorAll()方法获取到FORM表单中所有的input、select、textarea元素。此时formElements为一个NodeList对象，它包含FORM表单中所有匹配的表单元素。

第二步：将FORM表单中所有元素设置为不可编辑

通过遍历FORM表单中的所有表单元素，我们可以将表单元素的属性设置为不可编辑。示例代码如下：

for(let i=0; i < formElements.length; i++){
    formElements[i].setAttribute('readonly', true);
    formElements[i].setAttribute('disabled', true);
}

第一行代码是通过循环遍历FORM表单中的所有表单元素，第二、三行代码分别是将每个表单元素设置为只读和不可用状态。

第三步：阻止表单默认提交行为

由于将所有表单元素设置为只读、不可用状态之后，用户就不能再对表单进行修改，所以我们需要在表单进行提交时，阻止表单的默认提交行为，示例代码如下：

form.addEventListener('submit', function (event) {
    event.preventDefault();
});

通过addEventListerner()方法监听表单的提交事件，当表单被提交时，调用event对象的preventDefault()方法来阻止表单的默认提交行为。

示例

下面我们通过两个实例来展示如何使用JS使FORM表单所有元素不可编辑。

示例一：使用原生JS实现

<form>
    <input type="text" name="name" placeholder="姓名">
    <input type="email" name="email" placeholder="电子邮件">
    <textarea rows="5" name="message" placeholder="消息"></textarea>
    <button type="submit">提交</button>
</form>

<script>
const form = document.querySelector('form');
const formElements = form.querySelectorAll('input, select, textarea');

for(let i=0; i < formElements.length; i++){
    formElements[i].setAttribute('readonly', true);
    formElements[i].setAttribute('disabled', true);
}

form.addEventListener('submit', function (event) {
    event.preventDefault();
});
</script>

在此示例中，我们通过querySelectorAll()方法获取FORM表单中所有表单元素，然后再遍历所有表单元素，将其设置为不可编辑状态。最后，我们通过addEventListener()函数监听表单提交事件，在提交时阻止表单的默认行为。

示例二：使用jQuery实现

<form>
    <input type="text" name="name" placeholder="姓名">
    <input type="email" name="email" placeholder="电子邮件">
    <textarea rows="5" name="message" placeholder="消息"></textarea>
    <button type="submit">提交</button>
</form>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('form :input').prop('readonly', true);
    $('form :input').prop('disabled', true);

    $('form').submit(function(event){
        event.preventDefault();
    });
});
</script>

在此示例中，我们使用了jQuery库来实现FORM表单元素的不可编辑，首先通过$(document).ready()函数在文档加载完成后执行代码。然后，我们使用jQuery的选择器获取FORM表单中的所有表单元素，使用prop()函数分别将这些表单元素的readonly和disabled属性设置为true，这将使表单元素变为不可编辑状态。最后，我们又使用submit()方法监听表单提交事件，并在提交时阻止表单的默认行为。