jQuery专注于数组模糊

Question

** 这不是任何 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]);
        });
    });
});

Answer 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" />

Answer 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" />

Answer 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" />