在输入栏的焦点上更改输入提交的样式

可以使用jQuery的focus和blur回调。决定内部的当前状态，然后做任何你想做的…

$("input[type=text]").on("focus blur", function() {
    if( $("input[type=text]:focus").length > 0 ) {
        $("input[type=submit]").addClass("redbutton");
    }
    else {
        $("input[type=submit]").removeClass("redbutton");
    }
});

.redbutton {
  background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form accept-charset="UTF-8" method="post" action="http://go.pardot.com/l/213532/2016-08-08/jr9" class="form" id="pardot-form">
  <p class="form-field  first_name pd-text required required-custom">
    <label class="field-label" for="213532_2892pi_213532_2892">First Name *</label>
    <input type="text" name="213532_2892pi_213532_2892" id="213532_2892pi_213532_2892" value="" class="text" size="30" maxlength="40" onchange="" />
  </p>
  <p class="form-field  last_name pd-text required required-custom">
    <label class="field-label" for="213532_2894pi_213532_2894">Last Name *</label>
    <input type="text" name="213532_2894pi_213532_2894" id="213532_2894pi_213532_2894" value="" class="text" size="30" maxlength="80" onchange="" />
  </p>
  <p class="form-field  email pd-text required required-custom">
    <label class="field-label" for="213532_2896pi_213532_2896">Email *</label>
    <input type="text" name="213532_2896pi_213532_2896" id="213532_2896pi_213532_2896" value="" class="text" size="30" maxlength="255" onchange="piAjax.auditEmailField(this, 213532, 2896, 14168);" />
  </p>
  <p class="submit">
    <input type="submit" accesskey="s" value="SUBMIT" />
  </p>
</form>

试试这个

$(document).ready(function(){
  $("input").focus(function(){
    $("input[type='submit']").addClass("changeBg");
});
  $("input").focusout(function(){
    $("input[type='submit']").removeClass("changeBg");
});
});

.redbutton {
  background-color:red;
  }
.changeBg{background:yellow;}

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<form accept-charset="UTF-8" method="post" action="http://go.pardot.com/l/213532/2016-08-08/jr9" class="form" id="pardot-form">
  <p class="form-field  first_name pd-text required required-custom">
    <label class="field-label" for="213532_2892pi_213532_2892">First Name *</label>
    <input type="text" name="213532_2892pi_213532_2892" id="213532_2892pi_213532_2892" value="" class="text" size="30" maxlength="40" onchange="" />
  </p>
  <p class="form-field  last_name pd-text required required-custom">
    <label class="field-label" for="213532_2894pi_213532_2894">Last Name *</label>
    <input type="text" name="213532_2894pi_213532_2894" id="213532_2894pi_213532_2894" value="" class="text" size="30" maxlength="80" onchange="" />
  </p>
  <p class="form-field  email pd-text required required-custom">
    <label class="field-label" for="213532_2896pi_213532_2896">Email *</label>
    <input type="text" name="213532_2896pi_213532_2896" id="213532_2896pi_213532_2896" value="" class="text" size="30" maxlength="255" onchange="piAjax.auditEmailField(this, 213532, 2896, 14168);" />
  </p>
  <p class="submit">
    <input type="submit" accesskey="s" value="SUBMIT" />
  </p>
</form>

下面的代码你改变background-color的提交按钮是任何字段的焦点

 $("input").not("input[type=submit]").focus(function(){

      $("input[type=submit]").css("background-color","green")
    })

如果字段失去焦点，重置提交按钮的background-color

$("input").not("input[type=submit]").blur(function(){

  $("input[type=submit]").css("background-color","")
})

你可以这样做:

我以更详细的方式选择了这些项目，但如果你愿意，你可以简化。我只是想更清楚地说明我选择的是什么

ALSO更改电子邮件字段的输入类型，从text到input type="email"

$("p:not(:last-child) input").focus(function() {
     $(this).parent("p").siblings("p").find("input[type='submit']").addClass("redbutton")
     
});
$("p:not(:last-child) input").focusout(function() {
    $(this).parent("p").siblings("p").find("input[type='submit']").removeClass("redbutton")
 });

.redbutton {
  background-color:red;
  }
  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form accept-charset="UTF-8" method="post" action="http://go.pardot.com/l/213532/2016-08-08/jr9" class="form" id="pardot-form">
  <p class="form-field  first_name pd-text required required-custom">
    <label class="field-label" for="213532_2892pi_213532_2892">First Name *</label>
    <input type="text" name="213532_2892pi_213532_2892" id="213532_2892pi_213532_2892" value="" class="text" size="30" maxlength="40" onchange="" />
  </p>
  <p class="form-field  last_name pd-text required required-custom">
    <label class="field-label" for="213532_2894pi_213532_2894">Last Name *</label>
    <input type="text" name="213532_2894pi_213532_2894" id="213532_2894pi_213532_2894" value="" class="text" size="30" maxlength="80" onchange="" />
  </p>
  <p class="form-field  email pd-text required required-custom">
    <label class="field-label" for="213532_2896pi_213532_2896">Email *</label>
    <input type="email" name="213532_2896pi_213532_2896" id="213532_2896pi_213532_2896" value="" class="text" size="30" maxlength="255" onchange="piAjax.auditEmailField(this, 213532, 2896, 14168);" />
  </p>
  <p class="submit">
    <input type="submit" accesskey="s" value="SUBMIT" />
  </p>
</form>