0

我有一个问题，我试图在使用 Javascript 单击“重置按钮”后将表单中的文本输入更改为黑色。

我曾考虑在 HTML 中使用onReset来解决问题，但是，问题表明我必须仅使用 Javascript（或 JQuery，如果需要）来解决此问题，因此下面的HTML 是不可编辑的。我已经考虑过 document.forms 和 getElementbyID("contact") 但不知道从那里做什么。

任何帮助表示感谢！

这是我的 HTML：

<form id="contact" action="" onsubmit="checkContactForm( this ); return false;" >
<p>
  <label for="name">First name:</label>
  <input name="name" id="name" onfocus="resetField( this );" />
</p>
  <label for="message">Your Message:</label>
  <textarea name="message" id="message" onfocus="resetField( this );"></textarea>
</p>
<p>
  <button type="submit">Send Message</button>
  <button type="reset">Reset Form</button>
</p>

这是我的Javascript：

var requiredFields = [ "name", "message" ];


function resetField( theField ) {
  if ( theField.value == "Error" ) {
theField.value = "";
theField.style.color = "#000";
  }
}

function resetForm( theForm ){
for ( i in requiredFields ) {
    var fieldName = requiredFields[ i ];
    var theField = theForm[ fieldName ];
    theField.style.color = "#000";
    theField.value = "";
}
4

2 回答 2

0

解决方案如下

HTML 代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="ISO-8859-1">
        <title>Insert title here</title>
    </head>
    <body>
        <form action="nothing" id="testForm">
            <label for="textInput">Text Input</label>
            <input type="text" id="textInput" name="textInput">
            <label for="textAreaInput">Text Area Input</label>
            <textarea rows="10" cols="20" id="textAreaInput" name="textAreaInput"></textarea>
            <input type="submit" id="submitButton"> <input type="reset" id="resetButton">
        </form>
        <script type="text/javascript" src="scripts/lib/jquery-2.0.3.min.js"></script>
        <script type="text/javascript" src="scripts/app/test.js"></script>
    </body>
</html>

使用 jquery 的 Javascript 代码

$(document).ready(function() {
        $("#resetButton").click(function() {
            // change color of all textarea fields to red
            $("#testForm textarea").css('color', 'red');
            // change color of all text input fields to red
            $("#testForm input[type='text']").css('color', 'red');
            return false;
        });
    }
);
于 2013-10-12T14:13:09.800 回答
0

在使用Javascript单击“重置按钮”后，我试图将表单中的文本输入更改为黑色。

这可以使用 中click的事件来完成jQuery。像这样：

$('button[type="reset"]').click(function () {
  /* change the color using
   * $('input').css('color', '#000'); #000 is black..
   */
}

这样，当单击重置按钮时，输入文本的颜色将变为黑色。

重置输入的jQuery代码是：

$('input[type="name"]').val('');

注意 val 方法中的单个 qoutes，这将删除 val 并将其替换为空字符串。您也可以使用双引号作为val("").

var requiredFields = [ "name", "message" ];

这不是正确的方法，您应该使用input[name="name"]. 但是，您可以使用简单的 jQuery 更改 ID 或类的输入。

您正在使用：

resetField( this );

哪个行不通，因为在script标签中您正在使用

resetForm

而且由于这两者都不匹配，因此不会运行任何脚本！

祝你好运，

于 2013-10-12T13:21:27.340 回答