在输入字段的焦点上更改输入提交的样式答案

【问题标题】：change style of input submit on focus of input field在输入字段的焦点上更改输入提交的样式
【发布时间】：2016-08-19 07:06:18
【问题描述】：

当任何输入字段处于焦点时，我正在尝试更改按钮颜色。可以使用 javascript 或 CSS。感谢您的帮助。

.redbutton {
  background-color:red;
  }

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

【问题讨论】：

.redbutton 是哪个？提交按钮？到目前为止，您尝试了什么？
如果任何输入字段为焦点，为什么要更改按钮？只是想知道原因
是的。在示例中，我将使用 javascript 或 jquery 在任何字段处于焦点时为输入提交“按钮”插入一个类。我不知道该怎么做。
@KatyH。请参阅下面的答案。我使用了详细的选择，因此您可以确切地看到发生了什么

标签： javascript jquery html css forms

【解决方案1】：

您可以使用 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>

【讨论】：

【解决方案2】：

试试这个

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

【讨论】：

【解决方案3】：

下面的代码你将提交按钮的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","")
})

Working Fiddle

【讨论】：

【解决方案4】：

你可以这样做：

我以更详细的方式选择了这些项目，但您可以根据需要简化。我只是想更清楚我在选择什么

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>

【讨论】：