を非表示と入力doesntの仕事

Question

を示して、私は次のコードを持っている：

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

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

 

 
\t \t \t \t \t 
 

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

 
\t \t \t \t \t \t 
 
function showInput() { 
 

 
\t if(screenWidth === null){ 
 
\t \t screenWidth = document.documentElement.clientWidth; 
 
\t } 
 
\t if(display === 'none' && screenWidth > 959){ 
 
\t \t getInput.style.display = 'inline-block'; 
 
\t \t document.querySelector('.search-field').focus(); 
 
\t } else { 
 
\t \t getInput.style.display = 'none'; 
 
\t } 
 
\t \t \t \t \t \t 
 
} 
 

 
document.getElementsByTagName('body')[0].onclick=function(){ 
 
\t display = getCssProperty('search-field', 'display'); 
 
\t if(bodyDisplay === 'inline-block') { 
 
\t \t getInput.style.display = 'none'; 
 
\t } 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> 
 
\t <form action="#" class="search-form" id="search-field" method="get"> 
 
\t \t <div class="search-container-inner"> 
 
\t \t \t <input type="search" class="search-field form-fluid" placeholder="search" value="" name="s" title="test"> 
 
\t \t </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

あなたのコードは正しかったが、問題は、それはまた、非表示にしますbecouseユーザが入力中のテキストを入力することはできませんでした。したがって、私は以下の2行のコードを追加しました。

event.stopPropagation（）;

おかげ