gpt4 book ai didi

html - 有没有一种方法可以突出显示焦点输入的字段/div?

转载 作者:行者123 更新时间:2023-11-28 08:11:40 26 4
gpt4 key购买 nike

<!doctype html>
<html>

<style>
input:focus {
background: yellow;
}

div:focus {
background: gray;
}
</style>

**This section must be highlighted whenever i run the code**
<div>
SOME TEXT<input type = 'text' autofocus>
</div>
<div>
SOME TEXT <input type = 'text'>
</div>

</html>

最佳答案

您好,我尝试使用 jQuery 进行一些操作,但可能还有其他方法可以达到此结果。

首先我做了一个类.gray我在 jquery 部分使用它。如果你使用它,一定要包括 <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>

CSS

input:focus { 
background: yellow;
}

.gray {
background:gray;
}

jQuery

$('input').blur(function(){
$('input').parent().removeClass("gray");
})

.focus(function() {
$(this).parent().addClass("gray")
});

jsFiddle

如果需要,可以用 css('background', 'gray'); 替换 remove/addClass

note this may not be supported in older browsers especially older versions of IE (below 10)

input:focus {
background: yellow;
}
.gray {
background: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('input').blur(function() {
$('input').parent().removeClass("gray");
})

.focus(function() {
$(this).parent().addClass("gray")
});

});
</script>
<div>
SOME TEXT
<input type="text" value="" autofocus>
</div>
<div>
SOME TEXT
<input type="text" value="">
</div

关于html - 有没有一种方法可以突出显示焦点输入的字段/div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29230451/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com