jQuery专注于数组模糊

Posted 2023-03-05

【中文标题】jQuery专注于数组模糊

【英文标题】：jQuery on focus on blur with an array

【发布时间】：2017-12-22 21:39:56

【问题描述】：

** 这不是任何 IE9 占位符问题的重复。原因是，我使用的旧 JSP 框架 WebWork 不支持 html 中的占位符。 **

我想做的事

我想在字段中显示一个值作为placeholder 文本。但是如果用户开始输入，占位符文本应该会消失。

问题

如果我输入内容并在外部单击，我输入的内容将被占位符文本替换。我想阻止它被替换。如果输入为空，则显示占位符文本，如果输入有值，则不替换文本。

限制

由于某些技术原因，我也不能使用placeholder 属性。 （老框架，需要支持IE9）。

希望大家帮忙。

var inputTextIDs = [
    [".hotelLocaiton", "Location"],
    ["#agentTransfersSearchForm_filter_transfersName", "Location2"]
];

$.each(inputTextIDs, function(i, v) 
    //$('input'+inputTextIDs[i][0]).val(inputTextIDs[i][1]);
    $('input' + inputTextIDs[i][0]).on('change', function() 
        var inputValue = $.trim($('input' + inputTextIDs[i][0]).val());
        $('input' + inputTextIDs[i][0]).val(inputTextIDs[i][1]);
        $('input' + inputTextIDs[i][0]).on('focus', function() 
            $('input' + inputTextIDs[i][0]).val('');
        ).on('blur', function() 
            $('input' + inputTextIDs[i][0]).val(inputTextIDs[i][1]);
        );
    );
);

【问题讨论】：

我认为我们不能停止在键入时替换占位符！

@nasty 你可以根据需要查看我的答案

Placeholder in IE9的可能重复

还有：***.com/questions/15020826/… 和许多其他人。

@freedomn-m 不，这不是重复。我不能使用那个占位符插件，因为我使用的是 WebWork，一个旧的 JSP 框架，这有插件的复杂性。

【参考方案1】：

var inputTextIDs = [
  [".hotelLocaiton", "Location"],
  ["#agentTransfersSearchForm_filter_transfersName", "Location2"]

];

$.each(inputTextIDs, function(i, v) 

  $('input' + inputTextIDs[i][0]).on('focus', function() 
    if ($('input' + inputTextIDs[i][0]).val() == inputTextIDs[i][1]) 
      $('input' + inputTextIDs[i][0]).val('');
    
  ).on('blur', function() 
    if (!$('input' + inputTextIDs[i][0]).val()) 
      $('input' + inputTextIDs[i][0]).val(inputTextIDs[i][1]);
    
  );


  $('input' + inputTextIDs[i][0]).val(inputTextIDs[i][1]);

);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input class="hotelLocaiton" />
<input id="agentTransfersSearchForm_filter_transfersName" />

【讨论】：

@nasty 你到底需要实现什么？

我想在字段中显示占位符，但如果您输入一些内容，它不会用占位符替换您所写的内容

@nasty 所以初始输入字段将带有占位符，然后如果您写一些内容，它将删除占位符值等等，对吗？

让我们continue this discussion in chat。

【参考方案2】：

你可以使用focusin和focusout：

var inputTextIDs = [
  [".hotelLocaiton", "Location"],
  ["#agentTransfersSearchForm_filter_transfersName", "Location2"]
];

$.each(inputTextIDs, function(i, v) 
  $(v[0]).val(v[1]).focusin(function() 
    if ($(this).val() == v[1]) 
      $(this).val('');
    
  ).focusout(function() 
    if ($(this).val() == '') 
      $(this).val(v[1]);
    
  )
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input class="hotelLocaiton" />
<input id="agentTransfersSearchForm_filter_transfersName" />

【讨论】：

当我在输入消息后单击输入字段时，这仍然会清除文本。所以，1）输入一些东西，然后在输入字段内单击。这应该清除输入字段

非常感谢。这真太了不起了。但是对于密码字段，这显示 *** 而不是文本“密码”.. 是否可以修复？

好吧，如果类型是password，那就不可能了。是的，可以编写一些努力和代码行来调整并使其以某种方式工作，但前提是它确实值得。否则，我建议不要这样做，因为它可能不支持所有浏览器。

【参考方案3】：

您可以根据需要尝试此操作，它也适用于密码字段。

var inputTextIDs = [
  [".hotelLocaiton", "Location"],
  ["#agentTransfersSearchForm_filter_transfersName", "Location2"]

];

$.each(inputTextIDs, function(i, v) 
  var placeholderValue = inputTextIDs[i][1];
  $('input' + inputTextIDs[i][0]).val(placeholderValue);
  
  if($('input' + inputTextIDs[i][0]).attr("type")=="password")
    $('input' + inputTextIDs[i][0]).attr("original-type","password");
    $('input' + inputTextIDs[i][0]).attr("type","text");
  
  
  $('input' + inputTextIDs[i][0]).on('change', function()       
    if ($(this).val().trim() == "") 
      $(this).val(placeholderValue);
      
      if($(this).attr("type")=="password")
        $(this).attr("type","text");
      
    
    else
       if($(this).attr("original-type")=="password")
        $(this).attr("type","password");
      
    
  );

  $('input' + inputTextIDs[i][0]).on('focus', function() 
    if ($(this).val().trim() == placeholderValue) 
      $(this).val('');
      
      if($(this).attr("original-type")=="password")
        $(this).attr("type","password");
      
       
  ).on('blur', function() 
    if ($(this).val().trim() == "") 
      $(this).val(placeholderValue);
      
      if($(this).attr("type")=="password")
        $(this).attr("type","text");
      
    
  );

);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input class="hotelLocaiton" />
<input id="agentTransfersSearchForm_filter_transfersName" type="password" />

【讨论】：

非常感谢。这真太了不起了。但是对于密码字段，这显示 *** 而不是文本“密码”.. 是否可以修复？

我已经更新了答案，使其也适用于密码。

谢谢。但是当我单击密码输入字段时，它会将其type 更改为文本。然后当我点击外面时它再次变成密码

你可以再次coden-p。当您单击密码输入字段时，它将保留为密码字段。当在外部单击时检查值，如果值存在而不是占位符，则它将保持为密码类型，否则将更改为文本类型。你可以检查这个screencast.com/t/Kc2nkdvv