單擊更改顏色輸入字段

Question

我正在使用Bootstrap 4，並想通過單擊按鈕更改輸入字段的背景顏色。

這是我的代碼：

        <div class="form-group row">
            <label for="staticEmail" class="col-sm-2 col-form-label">Dein Ersparniss / Jahr</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="txtres" readonly>
            </div>
        </div>

這是按鈕：

<input type="button" class="btn btn-danger" value="Berechnen" onClick="sumValues()">

有人可以幫助我使用jQuery嗎？

Answer 1

.css('background-color','blue')在要更改顏色的輸入上使用此方法。 您可以像這樣通過名稱訪問輸入$('input[name="txtres"]')

 function sumValues(){ $('input[name="txtres"]').css('background-color','blue') } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form-group row"> <label for="staticEmail" class="col-sm-2 col-form-label">Dein Ersparniss / Jahr</label> <div class="col-sm-10"> <input type="text" class="form-control" name="txtres" readonly> </div> </div> <input type="button" class="btn btn-danger" value="Berechnen" onclick="sumValues()"> 

Answer 2

您可以向按鈕添加.click事件，然后使用.css()更改輸入字段的顏色：

 $('.color-btn').click(function() { $('.input-color').css({color: 'red', 'background-color': 'black'}); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form-group row"> <label for="staticEmail" class="col-sm-2 col-form-label">Dein Ersparniss / Jahr</label> <div class="col-sm-10"> <input value="Some text" class="input-color" type="text" class="form-control" name="txtres" readonly /> </div> </div> <input type="button" class="color-btn btn btn-danger" value="Berechnen" /> 

在這里，我為您的按鈕指定了color-btn類，以便可以使用jquery輕松地對其進行定位，還為您的文本框指定了input-color類。 因此，單擊按鈕時，任何具有input-color類的輸入元素都將能夠更改顏色。

Answer 3

單擊按鈕時使用css()更改bgcolor

 function sumValues(e){ $('input[name=txtres]').css('backgroundColor','red') } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form-group row"> <label for="staticEmail" class="col-sm-2 col-form-label">Dein Ersparniss / Jahr</label> <div class="col-sm-10"> <input type="text" class="form-control" name="txtres" readonly> <input type="button" class="btn btn-danger" value="Berechnen" onClick="sumValues()"> </div> </div> 

Answer 4

那就是我會做的

 $('btn-danger').css("background-color", "blue"); $(document).ready(function(){ $('.btn-danger').on( "click", function() { $('input[type="text"]').css("background-color", "blue"); }); }); 

 <div class="form-group row"> <label for="staticEmail" class="col-sm-2 col-form-label">Dein Ersparniss / Jahr</label> <div class="col-sm-10"> <input type="text" class="form-control" name="txtres" readonly> </div> </div> <input type="button" class="btn btn-danger" value="Berechnen" onClick="sumValues()"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

在這里，您會聽到甚至點擊按鈕的點擊，並在點擊后更改文本輸入的背景色

檢查小提琴

Answer 5

您還可以使css class具有所需的background-color ，然后在單擊button時將該class添加到輸入中。 這是執行此操作的另一種方法：

 sumValues = function(){ $('input[name="txtres"]').addClass( "colored-background" ); } 

 .colored-background { background: lightgreen; } 

 <div class="form-group row"> <label for="staticEmail" class="col-sm-2 col-form-label">Dein Ersparniss / Jahr</label> <div class="col-sm-10"> <input type="text" class="form-control" name="txtres" readonly> </div> </div> <input type="button" class="btn btn-danger" value="Berechnen" onClick="sumValues()"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>