輸入焦點和模糊

Question

我有這樣的代碼https://fiddle.jshell.net/cabeqaky/26/ 的問題是，如何使上first DIV click，輸入獲得焦點和 second DIV click輸入獲得散。怎麼做？ :)

HTML

<input class="inp" type="text"> 
<div class="box"></div> 

CSS

.box{ 
width:50px; 
height:50px; 
background-color:green; 
margin-top:10px; 
border:1px black solid; 
cursor:pointer 
} 

Answer 1

您可以在DIV使用MouseDown事件和檢查，如果輸入具有焦點。 e.preventDefault（）用於避免焦點位於mousedown事件上的div元素上。

$("div").on("mousedown",function(e){ 
 
    e.preventDefault(); 
 
    if($(".inp:focus").is(':focus')) 
 
    $(".inp").blur(); 
 
    else 
 
    $(".inp").focus(); 
 
})

.box{ 
 
width:50px; 
 
height:50px; 
 
background-color:green; 
 
margin-top:10px; 
 
border:1px black solid; 
 
cursor:pointer 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<input class="inp" type="text"> 
 
<div class="box"></div>

Answer 2

$(".box").click(function(){ 
 
    document.getElementsByClassName("inp")[0].focus(); 
 

 
})

.box{ 
 
    width:50px; 
 
    height:50px; 
 
    background-color:green; 
 
    margin-top:10px; 
 
    border:1px black solid; 
 
    cursor:pointer 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
    <input class="inp" type="text"> 
 
    <div class="box"></div>

Answer 3

$(document).ready(function(){ 
    $("div.box").data("toggle", 0); 
    $("div.box").click(function(){ 
     var toggle = $("div.box").data("toggle"); 
     if(toggle === 0){ 
      $("div.box").data("toggle", 1); 
      $("input.inp").focus(); 
     } else { 
      $("div.box").data("toggle", 0); 
      $("input.inp").blur(); 
     } 
    }); 
}); 

Answer 4

使用JavaScript函數在格：

var focus = false; 
 

 
function toggleFocus() { 
 
    focus = !focus; 
 
    if (focus) { 
 
    document.getElementById("focusedInput").focus(); 
 
    } 
 
}

<input class="inp" id="focusedInput" type="text"> 
 
<div class="box" onclick='toggleFocus()'></div>