Question

我有一个输入，当点击时会打开并在页面上的任何地方点击时关闭，除了div本身。我使用的函数在单击输入时更改输入背景颜色，但是当用户通过单击页面上的其他位置关闭输入div时，我无法弄清楚如何“撤消”颜色更改。

function makeRed() {
  var p = document.querySelector('input');
  p.style.background = 'red';
}

* {
  box-sizing: border-box;
}

body {
  background-color: black;
}

input[type=text] {
  cursor: pointer;
  position: relative;
  padding: 15px 25px 15px 20px;
  width: 20px;
  color: #525252;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 100;
  letter-spacing: 2px;
  border: none;
  border-radius: 5px;
  background: linear-gradient(to right, #FFFFFF 0%, #464747 #F9F9F9 100%);
  transition: width 0.4s ease;
  outline: none;
}

input[type=text]:focus {
  width: 300px;
}

i {
  position: relative;
  left: -37px;
  color: #000;
  cursor: pointer;
  pointer-events: none;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="searchBar">
  <input placeholder='Search...' class='js-search' type="text" onClick="makeRed()">
  <i class="fa fa-search"></i>
</div>

Answer 1

尝试使用 focus 和 blur 事件监听器

＆＃13;

var x = document.querySelector('input');
x.addEventListener("focus", function() {
  this.style.background = 'red';
})
x.addEventListener("blur", function() {
  this.style.background = 'white';
})

＆＃13;

* {
  box-sizing: border-box;
}

body {
  background-color: black;
}

input[type=text] {
  cursor: pointer;
  position: relative;
  padding: 15px 25px 15px 20px;
  width: 20px;
  color: #525252;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 100;
  letter-spacing: 2px;
  border: none;
  border-radius: 5px;
  background: linear-gradient(to right, #FFFFFF 0%, #464747 #F9F9F9 100%);
  transition: width 0.4s ease;
  outline: none;
}

input[type=text]:focus {
  width: 300px;
}

i {
  position: relative;
  left: -37px;
  color: #000;
  cursor: pointer;
  pointer-events: none;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="searchBar">
  <input placeholder='Search...' class='js-search' type="text">
  <i class="fa fa-search"></i>
</div>

＆＃13;

Answer 2

你想结束输入上的处理程序onfocusout以在输入未聚焦时调用函数（当在移动设备上点击或未聚焦任何其他内容时）

onfocusout="revertColor()"

Answer 3

为输入标签添加模糊功能

function makeWhite() {
  var p = document.querySelector('input');
    p.style.background = 'white';
}

function makeRed() {
  var p = document.querySelector('input');
    p.style.background = 'red';
}

<body>          
<div class="searchBar">
    <input placeholder='Search...' class='js-search' type="text" onClick="makeRed()" onBlur="makeWhite()">
      <i class="fa fa-search"></i>
</div>
</body>

Answer 4

您可以使用CSS实现预期的输出，而不是JavaScript函数。

如果你在影响风格的函数中做了其他事情，请告诉我们。

删除JS功能并将CSS更新为

input[type=text]:focus {
     width: 300px;
     background-color:red;
}

* {
  box-sizing: border-box;
}

body {
  background-color: black;
}

input[type=text] {
  cursor: pointer;
  position: relative;
  padding: 15px 25px 15px 20px;
  width: 20px;
  color: #525252;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 100;
  letter-spacing: 2px;
  border: none;
  border-radius: 5px;
  background: linear-gradient(to right, #FFFFFF 0%, #464747 #F9F9F9 100%);
  transition: width 0.4s ease;
  outline: none;
}

input[type=text]:focus {
  width: 300px;
  background-color:red;
}

i {
  position: relative;
  left: -37px;
  color: #000;
  cursor: pointer;
  pointer-events: none;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="searchBar">
  <input placeholder='Search...' class='js-search' type="text">
  <i class="fa fa-search"></i>
</div>

Answer 5

您还可以使用public static Expression<Func<T, bool>> AndAlso<T>( this Expression<Func<T, bool>> expr1, Expression<Func<T, bool>> expr2) { var parameter = Expression.Parameter(typeof (T)); var leftVisitor = new ReplaceExpressionVisitor(expr1.Parameters[0], parameter); var left = leftVisitor.Visit(expr1.Body); var rightVisitor = new ReplaceExpressionVisitor(expr2.Parameters[0], parameter); var right = rightVisitor.Visit(expr2.Body); return Expression.Lambda<Func<T, bool>>( Expression.AndAlso(left, right), parameter); } private class ReplaceExpressionVisitor : ExpressionVisitor { private readonly Expression _oldValue; private readonly Expression _newValue; public ReplaceExpressionVisitor(Expression oldValue, Expression newValue) { _oldValue = oldValue; _newValue = newValue; } public override Expression Visit(Expression node) { if (node == _oldValue) return _newValue; return base.Visit(node); } }和onfocus

onfocusout

var p = document.querySelector('input');
function makeRed() {
  p.style.background = 'red';
}
function removeRed(){
  p.style.background = 'initial';
}

Answer 6

重置css属性，将其设置为空字符串：

// set a new value to --myVariable
cssVar.myVariable = 'red';
// get the value of --myVariable
console.log( cssVar.myVariable );

var p = document.querySelector('input');
function makeRed(el) {
  el.style.background = 'red';
}

function resetBackground(el){
  el.style.background = '';
}
p.addEventListener('click', function(){
  makeRed(this);
}, false);
p.addEventListener('blur', function(){
  resetBackground(this);
}, false);

在模糊事件中调用resetBackground。

addEventListener

blur event

想要在单击除原始div之外的任何地方撤消功能

6 个答案: