单击外部div替换类

时间:2017-10-26 12:53:30

标签: javascript

我有一些javascript基本上删除了一个焦点背景图像的类,即点击输入框(具有背景图像)。

代码如下:

public App()
{
    var nav = new NavigationPage(new Login());
    MainPage = nav;
}

这很好用,当用户在输入字段中单击时删除.minbox,但是我想要做的是如果用户没有对输入字段进行任何更改,它应该按照开头的顺序添加类。此刻,一旦用户点击一次,该类就会消失,如果用户不对输入框进行任何更改,我希望它返回,例如,单击输入字段,然后再次单击退出而不输入任何东西。

有任何帮助吗?可能的?

3 个答案:

答案 0 :(得分:0)

我假设您不希望在用户输入值时添加类.minBox,但仅当他们决定不输入任何内容时,或者选择删除他们输入的内容。

为此,您可以使用模糊事件并检查是否输入了任何内容:

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

这将用于输出输出并点击输出。

答案 1 :(得分:0)

一个工作示例,有和没有jQuery:

注意:使用onblur解决方案时,每次字段模糊时都会调用方法,即使值未更改也是如此。使用onchange解决方案,当值发生更改时,方法仅称为 。这就是为什么onchange是更好的解决方案。

没有JQUERY

&#13;
&#13;
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; }
&#13;
input.minbox {background-color:red;}
&#13;
<input type="text" id="ets_gp_height" class="minbox" onchange="onChange(this)" onfocus="onFocus(this)">
&#13;
&#13;
&#13;

WITH JQUERY:

&#13;
&#13;
$(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");
  }
  });
});
&#13;
input.minbox {background-color:red;}
&#13;
<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">
&#13;
&#13;
&#13;

答案 2 :(得分:0)

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

当用户离开输入字段而没有输入任何值时,此代码将添加类'minBox'。