单击更改颜色输入字段

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>