在输入字段

Question

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

＆＃13;

＆＃13;

.redbutton {
  background-color:red;
  }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用jQuery的focus和blur回调。决定内部的当前状态并做任何你想做的事情......

＆＃13;

＆＃13;

$("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");
    }
});

＆＃13;

.redbutton {
  background-color:red;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个

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

A

Answer 3

你可以这样做：

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

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

＆＃13;

＆＃13;

$("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")
 });

＆＃13;

.redbutton {
  background-color:red;
  }
  

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

在代码下方，您更改提交按钮的public static func register<T>(_ protocolType: T.Type, observer: T) { //Warning: Conditional cast from 'T' to 'AnyObject' always succeeds guard let object = observer as? AnyObject else { fatalError("expecting reference type but found value type: \(observer)") } //... } 是任何字段都是焦点

background-color

如果字段松散焦点，请重置提交按钮的 $("input").not("input[type=submit]").focus(function(){ $("input[type=submit]").css("background-color","green") })

background-color

Working Fiddle