javascript - 隐藏和显示输入不起作用

Question

我有以下代码:

	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 {}
};

.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;
}

<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>

此代码在单击按钮时隐藏并显示输入。问题是我也想在单击正文时隐藏输入，但这也检测到按钮上的单击并且根本不显示输入，输入始终显示:无。我做错了什么以及我该怎么做？

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);
};

注意:为了演示并在 jsfiddle 中进行复制，我更改了检查 screenwidth >500。您可以在代码中更改它。

主体部分标有红色边框。

检查jsFiddle

您的代码是正确的，但问题是用户无法在输入中输入文本，因为它也会隐藏。所以我在下面添加了两行代码

event.stopPropagation();

谢谢