Question

我有以下代码：

＆＃13;

	var getInput = document.querySelector('.search-form')
var screenWidth;
var getWidth;
var bodyDisplay;
var display;

window.onresize = function(event) {
	screenWidth = event.target.outerWidth;
};


					

function getCssProperty(elmId, property){
   		var elem = document.getElementById(elmId);
   		return window.getComputedStyle(elem,null).getPropertyValue(property);
}

						
function showInput() {

	if(screenWidth === null){
		screenWidth = document.documentElement.clientWidth;
	}
	if(display === 'none' && screenWidth > 959){
		getInput.style.display = 'inline-block';
		document.querySelector('.search-field').focus();
	} else {
		getInput.style.display = 'none';
	}
						
}

document.getElementsByTagName('body')[0].onclick=function(){
	display = getCssProperty('search-field', 'display');
	if(bodyDisplay === 'inline-block') {
		getInput.style.display = 'none';
	} else {}
};

＆＃13;

.search-container {
  background: #fff;
}

.search-form {
  position: relative;
  background: #000;
  width: 250px;
  display: none;
  z-index: 9999;
}

.search-field {
  margin: 0;
}

.search-field:hover,
.search-field:focus {
  border: 1px solid #0cb4ce;
}

button {
  display: block;
}

＆＃13;

<button onclick="showInput()">Press here</button>
	<form action="#" class="search-form" id="search-field" method="get">
		<div class="search-container-inner">
			<input type="search" class="search-field form-fluid" placeholder="search" value="" name="s" title="test">
		</div>
    </form>

＆＃13;

此代码隐藏并显示单击按钮时的输入。问题是当我点击主体隐藏输入时我也想做它，但这也检测到按钮上的点击并且它根本没有显示输入，输入总是显示：无。我做错了什么，我该怎么做？

Answer 1

var getInput = document.querySelector('.search-form')
var screenWidth;
var getWidth;
var bodyDisplay;
var display;

window.onresize = function(event) {
    screenWidth = event.target.outerWidth;
};

function getCssProperty(elmId, property){
        var elem = document.getElementById(elmId);
        return window.getComputedStyle(elem,null).getPropertyValue(property);
}

function showInput(event) {
    event.stopPropagation();
    console.log(event.target.className);
    if(event.target.className == "search-field form-fluid") return;
    if(screenWidth === undefined){  //screenWidth is undefined but not null
     screenWidth = document.documentElement.clientWidth;
    }
    console.log(screenWidth ,"b")
    if(display === undefined && screenWidth > 500){ //display is undefined but not null
        getInput.style.display = 'inline-block';
        document.querySelector('.search-field').focus();
    display = true; //setting display true as a flag 
    } else {
    display=undefined; // making display undefined so that again on click if loop will execute
        getInput.style.display = 'none';
    }
}

document.getElementsByTagName('body')[0].onclick=function(event){
  console.log("body")
    display= true; // if true else loop in showInput will execute

  showInput(event);
};

注意：对于demo和要在jsfiddle中复制，我更改了检查screenwidth >500。您可以在代码中更改它。

身体部位标有红色边框。

检查jsFiddle

您的代码是正确的但问题是用户无法在输入中输入文本因为它也会隐藏。所以我在

下添加了两行代码

event.stopPropagation（）;

由于

隐藏和显示输入不起作用

1 个答案: