Question

在不使用任何插件的情况下，jQuery或jQuery UI中是否有内置函数可以实现您在http://www.youtube.com等网站上看到的表单字段边框突出显示效果？

在YT中，当您在搜索字段内单击时，边框会突出显示蓝色。

我尝试使用css和jquery addclass（）函数来实现这一点，以便在单击时为该类提供输入字段。但是它只是不一样，youtube中的效果看起来比通过css可以做的好很多。

修改

哎呀我忘记了，我的意思是只有当用户在字段内点击时才应添加边框。我想知道是否有基于非CSS的方法。

Answer 1

通过查看youtube源代码，你可以看到他们正在使用css，为什么要用JS复杂化？：焦点是supported in all major browswers。这是从youtube站点拉出的源（使用firebug）。

.search-form .search-term {
border:1px solid #666666;
height:1.38462em;
padding:4px 2px 1px;
width:22em;
}
.search-form .search-term:focus {
border:2px solid #BBDAFD;
margin-bottom:0;
margin-top:0;
padding-left:1px;
padding-right:1px;
}

在Linux上仔细检查了w / FF 3.x，一切都很顺利。

Answer 2

$(function(){
    $('#input id').focus(function(){
       $(this).css({'border': '1px solid #ff0000'}); // to red
    });
});

Answer 3

为什么要使用非CSS方法？除非您尝试使用CSS来解决浏览器缺陷（这可能非常适用），否则您应该总是更喜欢使用CSS解决方案。

然而，这是jQuery解决方案（非常简单），但我会使用CSS解决方案，除非它证明不令人满意。当您专注于输入边框时，这只会改变输入边框的样式。请记住，当它变得模糊时，你仍然需要删除它。

$('input[type=text], input[type=password], textarea').focus(function(){
    $(this).css('border', '1px solid #000'); // you could (should) also use .addClass here to apply a class you've already defined in your CSS
});

Answer 4

您必须使用一些样式格式才能达到效果。但是，我尝试在代码中使用最小的CSS，因为您没有请求CSS。这个jQuery代码将效果应用于页面上的所有输入元素。

$(function(){
  $('input')
    .focus(function() {
      $(this).css('border','2px solid #bbdafd');
    })
    .blur(function() {
      $(this).css('border,'1px solid #666666');
    });
});

请注意：边框样式（颜色和宽度）取自Youtube，所以非常相似！

是否有任何内置的jQuery函数来突出显示表单字段的边框？

修改

4 个答案: