divの外側をクリックしてクラスを置き換えます

Question

私はいくつかのjavascriptを持っています。これは基本的にフォーカスのある背景イメージを持つクラスを削除します。つまり、入力ボックス（バックグラウンドイメージを持っています）をクリックします。次のように

コードは次のとおりです。

$(function(){ 
$("#ets_gp_height").focus(function(){ 
if(!$(this).hasClass("minbox")) { 
} else { 
    $(this).removeClass("minbox"); 
} 
}); 
}); 

これがうまく機能し、ユーザーが入力フィールド内クリックしたときに、ユーザが入力を変更しません場合は、しかし、私は何をしたいことはある.minboxを削除しますフィールドには、最初にクラスを追加する必要があります。現時点では、ユーザーが一度クリックすると、クラスは正常に消えてしまいます。ユーザーが入力ボックスを変更しないと戻ってくるので、たとえば入力フィールドをクリックしてから、何でも

助けが必要ですか？可能？

Answer 1

ユーザーが値を入力したときにクラス.minBoxを追加したくない場合は、何も入力しないか、入力したものを消去することを選択した場合に限ります。これを行うには

、あなたはblurイベントを使用して、入力されたものがありますかどうかを確認することができます

$("#ets_gp_height").blur(function()=> { 
    if($(this).val().length < 1) $(this).addClass('minBox'); 
}); 

これはそれのうち入力とクリックのうち、TABingのために動作します。 jQueryの場合とない場合

Answer 2

実施例：

注onblur溶液で、方法は、値が変更されていない場合でも、フィールドはbluredされるたびに呼び出されます。 onchange溶液の場合は、値が変更されたときはとなります。その理由はonchangeが良い解決策です。 jQueryのjQueryを使って

function onChange(input){ 
 
    input.value.length > 0 || setClassName(input, 'minbox') ; 
 
} 
 
function onFocus(input){ 
 
    if(input.className == 'minbox') 
 
    { 
 
    input.className = '' ; 
 
    } 
 
} 
 
function setClassName(o, c){ o.className = c; }

input.minbox {background-color:red;}

<input type="text" id="ets_gp_height" class="minbox" onchange="onChange(this)" onfocus="onFocus(this)">

WITHOUT

：

$(function(){ 
 

 
    $("#ets_gp_height").change(function(){ 
 
    $(this).val().length > 0 || $(this).addClass("minbox"); 
 
    }) 
 
    
 

 
    $("#ets_gp_height").focus(function(){ 
 
    if(!$(this).hasClass("minbox")) { 
 

 
    } else { 
 
     $(this).removeClass("minbox"); 
 
    } 
 
    }); 
 
});

input.minbox {background-color:red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="ets_gp_height" class="minbox">

Answer 3

$(document).on("blur", "#ets_gp_height", function(){ 
    if($(this).val() == '') { 
     $(this).addClass('minBox'); 
    } 
}); 

このコードは、ユーザーが値を入力せずに入力フィールドから出るときにクラス 'minBox'を追加します。