更改边框/颜色onFocus

我专注于制作改变div的border-bottom颜色的脚本

然后在单击其他位置后更改回默认颜色。

这是我试过的：

CSS：

 .div1 {border-bottom:1px solid #ccc;} 

Javacript：

 function inputFocus(){ $(".div1").css("border-bottom","1px solid #ffba00"); }; 

HTML：

第一部分（改变焦点上的颜色）工作正常，但是在点击其他地方后（没有注意输入）它不会改变回css文件中设置的正常样式。

知道我做错了什么？

Answer 1

我建议：

 $('input').focus( function(){ $(this).css('border-bottom','1px solid #000'); }).blur( function(){ $(this).css('border-bottom','1px solid #ccc'); });​ 

JS小提琴演示 。

虽然你是否适合CSS：

 input:focus, input:active { border-bottom: 1px solid #000; } 

JS小提琴演示 。

Answer 2

 $('input').focus(function(){ $(this).css('border-bottom-color','#ffba00'); }); $('input').blur(function(){ $(this).css('border-bottom-color','#ccc'); }); 

Answer 3

您将一个函数添加到onBlur事件以回滚您的更改

Answer 4

你必须使用onBlur事件。

JavaScript的：

 function inputBlur() { $(".div1").css("border-bottom","1px solid #ccc"); } 

HTML：

但是 ，更好的选择是使用类切换。

HTML：

CSS：

 .myinput { border-bottom:1px solid #ccc; } .myinput.active { border-bottom:1px solid #ffba00; } 

JavaScript的：

 $(function() { $(".myinput").on("focus", function() { $(this).addClass("active"); }).on("blur", function() { $(this).removeClass("active"); }); }); 

Answer 5

而不是在html中调用函数，你可以试试这个：

 .border {border-bottom:1px solid #ccc;} $("input[type='text']").focus(function(){ $(this).addClass("border") }) $("input[type='text']").blur(function(){ $(this).removeClass("border"); }) 

Answer 6

发生这种情况是因为在从控件中失去焦点后未更改css。

这有助于：

  function inputFocus(){ $(".div1").removeAttr('style'); }; 

Answer 7

您不应该使用JavaScript来执行此操作。 CSS有一个:focus选择器，更适合这个。

 .div1 {border-bottom:1px solid #ccc;} .div1:focus {border-bottom:1px solid #ffba00;}