Question

使用jquery点击时，是否可以突出显示文本框的边框/使文本框的背景颜色改变颜色？

我能找到的是与文本框内突出显示文本相关的代码片段，而不是文件框本身。

由于

Answer 1

您更改了文本框的css class。在css类中，您可以指定边框等，例如：

$(function() {
    $("#textboxid").click(function() {
        $(this).toggleClass("textboxhighlight");
    });
});

然后添加一些css：

.textboxhighlight {
    background-color: red;
}

编辑：根据问题＆＃34;点击＆＃34; - 但改变焦点/模糊可能更为谨慎

Answer 2

$("#mytextbox").focus(function(){
  $(this).addClass("focused");
});

$("#mytextbox").blur(function(){
  $(this).removeClass("focused");
});

.focused{
  border: solid 1px red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<input type="text" id="mytextbox" value="Hello There !" />

Answer 3

在焦点上，它会将输入背景的颜色更改为黄色，以便＆＃34;突出显示＆＃34;它，在模糊时会改变它：

$("input text").on("focus", function(){
    $(this).attr("background-color", "yellow");
}

$("input text").on("blur", function(){
        $(this).attr("background-color", "transparent");
}

Answer 4

<input type="text" id="mytextbox" value="Hello There !" />

$("#mytextbox").focus(function(){ $(this).addClass("focused"); });

.focused{ border-color: #a94442 !important; }

http://jsfiddle.net/apurva_prajapati/zepy2ogh/

Answer 5

$("#mytextbox").onchange(function(){
  $(this).addClass("focused");
});

$("#mytextbox").blur(function(){
  $(this).removeClass("focused");
});

.focused{
  border: solid 1px red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<input type="text" id="mytextbox" value="Hello There !" />

使用jquery突出显示文本框

5 个答案: