使用 jquery 突出显示文本框

Question

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

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

谢谢

Answer 1

在聚焦时，它会将输入背景的颜色更改为黄色 "highlight"，在模糊时，它会将其改回：

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

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

Answer 2

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

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

然后添加一些 css:

.textboxhighlight {
    background-color: red;
}

编辑：根据问题 "when clicked" - 但在 focus/blur

上更改可能更谨慎

Answer 3

$("#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 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 突出显示文本框

Highlighting a text box using jquery

jquery

frontend

textbox

jquery-ui

jquery-plugins