Question

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

代码如下：

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

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

有任何帮助吗？可能的？

Answer 1

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

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

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

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

Answer 2

一个工作示例，有和没有jQuery：

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

没有JQUERY

＆＃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;

WITH JQUERY：

＆＃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;

Answer 3

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

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

单击外部div替换类

3 个答案: