[英]How to change the background color of an input field when text is entered?
我對Javascript和jQuery相當陌生，似乎無法確定我的代碼的行為方式。
我創建了兩個看似相同的函數來更改輸入字段的背景色。 他們的目標是，如果在字段中鍵入任何內容，則將給定輸入字段的背景色更改為顏色#00FF7F 。 如果沒有，該字段應該是透明的。
代碼JS：
$(document).ready(function () {
var $input1 = $("#logindata1");
var $input2 = $("#logindata2");
function onChangeInput1() {
$input1.css("background-color", "#00FF7F");
var value = $.trim($(".form-control").val());
if (value.length === 0) {
$input1.css("background-color", "transparent");
}
}
function onChangeInput2() {
$input2.css("background-color", "#00FF7F");
var value = $.trim($(".form-control").val());
if (value.length === 0) {
$input2.css("#background-color", "transparent");
}
}
$input1.on("keyup", onChangeInput1);
$input2.on("keyup", onChangeInput2);
});
CSS：
#loginbox {
width: 400px;
height: 200px;
margin-left: auto;
margin-right: auto;
margin-top: 25%;
}
.logindata {
margin-left: auto;
margin-right: auto;
margin-top: 20px;
height: 60px;
width: 290px;
transition: 0.25s ease;
}
.form-control {
margin-left: auto;
margin-right: auto;
height: 55px;
width: 288px;
border-style: none;
background-color: transparent;
text-align: center;
border: solid 2px #00FF7F;
transition: 0.25s ease;
font-size: 25px;
font-family: "Trebuchet MS";
}
.form-control:hover {
box-shadow: 0px 0px 30px #2E8B57;
}
::-webkit-input-placeholder {
color: #00FF7F;
}
簡單的HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<!-- Stylesheet link -->
<link rel="stylesheet" type="text/css" href="assets/style.css">
<!-- jQuery link -->
<script type="text/javascript" src="assets/vendor/jquery-3.1.0.min.js"></script>
</head>
<body>
<div id="loginbox">
<div class="logindata" id="logindata1">
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="logindata" id="logindata2">
<input type="password" class="form-control" placeholder="Password">
</div>
</div>
<!-- Javascript link-->
<script type="text/javascript" src="assets/js/javascript.js"></script>
</body>
在上面的jsbin上，嘗試在“用戶名”和“密碼”字段中鍵入內容，以查看它們的反應不同。
發生的圖像。 不想在這里包括所有圖像：
我意識到可能有一種方法可以讓我的js / jquery變成每個輸入字段都調用而不是每個函數都有一個函數。
如果這兩個字段都是必需的，這是僅使用CSS的簡單得多的解決方案。
將required的屬性添加到您的<input>標記中，然后使用偽類:valid 。
.form-control:valid {
background-color: #00FF7F;
}
程式碼片段：
#loginbox { width: 400px; height: 200px; margin-left: auto; margin-right: auto; margin-top: 25%; } .logindata { margin-left: auto; margin-right: auto; margin-top: 20px; height: 60px; width: 290px; transition: 0.25s ease; } .form-control { margin-left: auto; margin-right: auto; height: 55px; width: 288px; border-style: none; background-color: transparent; text-align: center; border: solid 2px #00FF7F; transition: 0.25s ease; font-size: 25px; font-family: "Trebuchet MS"; } .form-control:hover { box-shadow: 0px 0px 30px #2E8B57; } ::-webkit-input-placeholder { color: #00FF7F; } .form-control:valid { background-color: #00FF7F; }
<div id="loginbox"> <div class="logindata" id="logindata1"> <input type="text" class="form-control" placeholder="Username" required> </div> <div class="logindata" id="logindata2"> <input type="password" class="form-control" placeholder="Password" required> </div> </div>
jsFiddle： https ://jsfiddle.net/7vzjz2u5/3/
jQuery的
$(document).ready(function() {
$('.change-background').on('change', function() {
var $this = $(this);
var value = $.trim($this.val());
// toggleClass can be provided a bool value,
// If we provide true we add class, if false we remove class
$this.toggleClass('filled-background', value.length !== 0);
}).change();
// We also want to call a 'change' event on
// all inputs with the change-background class just incase the page has
// pre-filled in values
});
無需偵聽keyup事件然后運行函數，只需在change事件上創建一個偵聽器，如果我們僅對要更改背景顏色的所有輸入都應用一個類，則只需創建一個偵聽器即可對於具有change-background類的任何輸入，都可以使用它。
HTML
<div id="loginbox">
<div class="logindata" id="logindata1">
<input type="text" class="change-background form-control" placeholder="Username">
</div>
<div class="logindata" id="logindata2">
<input type="password" class="change-background form-control" placeholder="Password">
</div>
</div>
CSS（背景色的額外類）
.filled-background {
background-color: #00FF7F;
}
偵聽keyup又回來了，某人可能想要復制並粘貼其用戶名和密碼，如果這樣做，則使用右鍵單擊並粘貼不會觸發keyup事件。
當長度為0時，您的代碼將清除背景色。使用以下代碼片段檢查長度的方式：
var value = $.trim($(".form-control").val());
選擇器$(".form-control")將選擇CSS類為.form-control所有元素。 這是一個問題，因為其中不止一個。 在這種情況下，它將始終從找到的第一個元素返回值。
您應該更改代碼以通過按ID搜索來檢查特定控件，如下所示：
var value = $.trim($("#logindata1 input").val()); //get user ID
var value = $.trim($("#logindata2 input").val()); //get password
您有一些小錯誤，但不用擔心。 我們可以解決它。
其他答案也指出了一些重要的問題：您正在嘗試使用form-control類來獲取選擇所有元素的值。
var value = $.trim($(".form-control").val());
您可以執行此操作，將選擇器替換為已經聲明的變量$input1和$input2 。 這條路：
var value = $.trim($input1.val());
var value = $.trim($input2.val());
好。 第一個問題解決了。 第二個問題是您的第二個功能。 您嘗試設置無效的CSS： $input2.css("#background-color", "transparent");
什么時候應該是： $input2.css("background-color", "transparent"); （不帶# ）。
真好 下一個。 您正在設置的id是logindata1和logindata2在您的div上。 因此，您錯誤地嘗試獲取div的值而不是輸入的值。 您可以通過添加input來固定選擇器，方法如下：
var $input1 = $("#logindata1 input");
var $input2 = $("#logindata2 input");
因此，最后，它應該工作：
$(document).ready(function () {
var $input1 = $("#logindata1 input");
var $input2 = $("#logindata2 input");
function onChangeInput1() {
$input1.css("background-color", "#00007F");
var value = $.trim($input1.val());
if (value.length === 0) {
$input1.css("background-color", "transparent");
}
}
function onChangeInput2() {
$input2.css("background-color", "#00007F");
var value = $.trim($input2.val());
if (value.length === 0) {
$input2.css("background-color", "transparent");
}
}
$input1.on("keyup", onChangeInput1);
$input2.on("keyup", onChangeInput2);
});
您的價值檢查不正確。 使用jQuery，您每次都會檢查兩個輸入的值。
嘗試檢查您感興趣的單個輸入。
$(document).ready(function () {
var $input1 = $("#logindata1");
var $input2 = $("#logindata2");
function onChangeInput1() {
$input1.css("background-color", "#00FF7F");
var value = $.trim($input1.val());
if (value.length === 0) {
$input1.css("background-color", "transparent");
}
}
function onChangeInput2() {
$input2.css("background-color", "#00FF7F");
var value = $.trim($input2.val());
if (value.length === 0) {
$input2.css("#background-color", "transparent");
}
}
$input1.on("keyup", onChangeInput1);
$input2.on("keyup", onChangeInput2);
});
只要有用 javascript 輸入的文本，就改變輸入字段的背景顏色？
[英]Change background color of input field as long as there is text entered with javascript?
在輸入字段中輸入文本時，是否可以更改div的背景？
[英]Is there a way to change the background of a div when text is entered into an input field?
如何在聚焦文本輸入字段時更改 div 的背景顏色？
[英]How to change the background color of the div while focusing the text Input field?
輸入特定字符時，在輸入字段中進行Clint寫入期間更改文本顏色
[英]change text color during Clint write in input field when specific char entered
如何使用按鈕更改在搜索字段中輸入的文本值的顏色？
[英]How to change the color of text values entered in the search field with a button?
當我輸入並提交內容時，如何停止輸入表單以更改背景顏色和文本顏色？
[英]How do I stop the input form to change background color and text color when I input and submit something?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.