jQuery Form Manipulation

Question

Использование jQuery и следующий пример кода формы с Веб-сайт Line25 :

<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> 

Может кто-нибудь, пожалуйста, дайте мне знать, как мне поступить с меткой "Имя", указанной выше:

1) только чтение / отключено, а также задан желтый цвет фона

2) показать / скрыть этот элемент формы на веб-странице на основе условия

3) только чтение / отключено, но все же позволяет пользователю поместить курсор в ячейку и переместить курсор влево / вправо.

4) Когда пользователь вкладывает / перемещается в каждое поле в приведенном выше примере, выделите поле, возможно, цвет рамки вокруг поля, указывающий, что это активное поле.

Спасибо.

Answer 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; }