фокус ввода и размытие

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

Вы можете использовать MouseDown событие на ДИВ и проверить, если вход имеет фокус. e.preventDefault() используется, чтобы избежать фокусировки на элементе div на событии mousedown.

$("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

использовать яваскрипта функцию на DIV:

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>