jQuery 表单操作

Posted 2023-03-05

【中文标题】jQuery 表单操作

【英文标题】：jQuery form manipulation

【发布时间】：2011-07-11 12:23:51

【问题描述】：

使用 jQuery，以及来自Line25 website 的以下示例表单代码：

<div id="contact"> 
<h1>Send an email</h1> 
<form action="#" method="post"> 
    <fieldset> 
        <label for="name">Name:</label> 
        <input type="text" id="name" placeholder="Enter your full name" /> 
        
        <label for="email">Email:</label> 
        <input type="email" id="email" placeholder="Enter your email address" /> 
        
        <label for="message">Message:</label> 
        <textarea id="message" placeholder="What's on your mind?"></textarea> 
        
        <input type="submit" value="Send message" /> 
        
    </fieldset> 
</form> 
</div> 

如何在上面输入“姓名”标签：

只读/禁用并将背景颜色设置为黄色

根据条件在网页上显示/隐藏此表单项

只读/禁用但仍允许用户将光标放在单元格中并向左/向右移动光标。

当用户在上面的示例中选择/移动到每个字段时，突出显示该字段，可能是字段周围的边框颜色表明这是活动字段。

【问题讨论】：

请将问题一分为四。或者使用谷歌单独搜索。

嗯，你自己做了多少？ jquery.com 是一个很好的起点，有很多例子。现在，您似乎只想找到能胜任所有工作的人。

【参考方案1】：

您可以像这样禁用表单输入元素：

$("#name").attr("disabled", "disabled");

要设置背景颜色，请创建一个 CSS 类：

input.disabled  background-color: yellow; 

然后做：

$("#name").attr("disabled", "disabled").addClass("disabled");

您可以像这样隐藏表单：

$("#contact").hide();

一个条件可能是点击了一个按钮：

$("#buttonid").click(function()  $("#contact").toggle(); );

请注意，如果该表单具有验证功能，并且您仅隐藏了部分输入元素并使提交按钮可见，则除非在隐藏元素上禁用验证，否则该表单将不会提交。

您可以将输入元素设为只读：

$("#name").attr("readonly", "readonly");

最后实现4、创建CSS类：

input:active  border: solid 1px red;