更改边框/颜色onFocus
我专注于制作改变div的border-bottom颜色的脚本
然后在单击其他位置后更改回默认颜色。
这是我试过的：
CSS：
.div1 {border-bottom:1px solid #ccc;}
Javacript：
function inputFocus(){ $(".div1").css("border-bottom","1px solid #ffba00"); };
HTML：
第一部分（改变焦点上的颜色）工作正常，但是在点击其他地方后（没有注意输入）它不会改变回css文件中设置的正常样式。
知道我做错了什么？
我建议：
$('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小提琴演示 。
$('input').focus(function(){ $(this).css('border-bottom-color','#ffba00'); }); $('input').blur(function(){ $(this).css('border-bottom-color','#ccc'); });
您将一个函数添加到onBlur事件以回滚您的更改
你必须使用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"); }); });
而不是在html中调用函数，你可以试试这个：
.border {border-bottom:1px solid #ccc;} $("input[type='text']").focus(function(){ $(this).addClass("border") }) $("input[type='text']").blur(function(){ $(this).removeClass("border"); })
发生这种情况是因为在从控件中失去焦点后未更改css。
这有助于：
function inputFocus(){ $(".div1").removeAttr('style'); };
您不应该使用JavaScript来执行此操作。 CSS有一个:focus选择器，更适合这个。
.div1 {border-bottom:1px solid #ccc;} .div1:focus {border-bottom:1px solid #ffba00;}