使用css聚焦文本区域

Focus textarea using css

本文关键字：区域 文本 聚焦 css 使用      更新时间：2023-09-26

我正在搜索一个javascript、html或css代码，当我点击文本区域时，它们会改变背景颜色。我需要这样的东西http://prntscr.com/bzsqgq

我试过用javascript，但我做不到，我试过onclick用rgba改变背景颜色，比如blur。

$('.comment .body').on('click', function() {
    if($(this).hasClass('changing')) {
        $('.comment textarea').blur();
    }else {
        $('.comment textarea').focus();
    }
});

$('.comment textarea').on('focus',function() {
    $('.comment .body').addClass('changing').style('background-color: #FF0000;');
});         
$('.change-stamp textarea').on('blur',function() {
    $('.comment .body').removeClass('changing').text('background-color: transparent;');
});

谢谢谁能帮我。

添加一个wrapper和一个类似的inner元素

.wrapper {
  display: inline-block;
  position: relative;
  padding: 20px;
}
input:focus ~ .inner,
textarea:focus ~ .inner {
  position: absolute;
  z-index: -1;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: yellow;
  border: 2px solid red;
  box-sizing: border-box;
}
<div class="wrapper">
  <input type="text">
  <br/>
  <br/>
  <textarea></textarea>
  <div class="inner"></div>
</div>

var element = document.getElementsByClassName("chg_parent_on_focus")[0]
var parent = element.parentElement
element.onfocus = function(){
  parent.className = "cont active";
}
element.onblur = function(){
  parent.className = "cont"; 
}
.cont{
 width:200px;
 background:red;
 padding:100px;
}
input{
  margin:10px;
  }
.cont.active{
 background:black;
}
<div class="cont">
  <input class="chg_parent_on_focus"/>
</div>

相关文章：