Question

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

我想做什么

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

问题

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

限制

由于某些技术原因，我也无法使用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]); }); }); });属性。（旧框架和需要支持IE9）。

希望你们能帮忙。

import sys
print(sys.executable)

Answer 1

＆＃13;

<table id="clubs-table" class="table">
   <tr>
       <th>clubName</th>
       <th>description</th>
       <th>userName</th>
       <th>created</th>
       <th>last_updated</th>          
  </tr>
 </table>

<script>
  $(function () {
        $('#clubs-table').DataTable({
            dom: 'lfrtip',
            processing: false,
            serverSide: true,
            autoWidth: false,
            ajax: {
                url: '{{ route("admin.access.clubs.get") }}',
                type: 'post',
                data: {status: 1, trashed: false},
                error: function (xhr, err) {
                    if (err === 'parsererror')
                        console.log(err);
                }
            },
            columns: [
                {data: 'clubName', name: 'clubs.clubName'},
                {data: 'description', name: 'clubs.description'},
                {data: 'user', name: 'user.first_name', sortable:false},
                {data: 'created_at', name: 'clubs.created_at'},
                {data: 'updated_at', name: 'clubs.updated_at'}
            ],
        });
    });
</script>

＆＃13;

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]);

});

＆＃13;

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

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

＆＃13;

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");
      }
    }
  });

});

＆＃13;

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

＆＃13;

jQuery专注于模糊与数组

3 个答案: