Ringkasan penyelesaian untuk mencapai effect_jquery pemegang tempat

Pemegang tempat ialah atribut html5d5fd7aea971a85678ba271703566ebfd Ia memberikan maklumat pembayang (petunjuk) yang menerangkan nilai jangkaan medan input Petunjuk akan dipaparkan apabila medan input kosong. Pelayar mewah menyokong atribut ini (teks ie10/11 hilang apabila fokus diperoleh), tetapi ie6/7/8/9 tidak menyokongnya. Untuk serasi dengan semua penyemak imbas utama dan mengekalkan kesan pemaparan yang konsisten, tiga penyelesaian berikut adalah untuk rujukan sahaja.

Pilihan 1:

Tinggalkan pemegang tempat atribut asal, tambahkan rentang nod saudara pada input dan tetapkan kedudukan mutlak untuk rentang (nod induk ialah kedudukan: relatif;) supaya ia terletak di atas input. Coretan kod html adalah seperti berikut:

<li>
  <div class="inputMD" style="position: relative;">
    <input class="phInput" type="text" />
    <span class="phText" style="clear: both; height: 33px; line-height: 33px; color: #aaa; position: absolute; left: 10px; top: 5px;">手机号码/邮箱地址</span>
  </div>
</li>
<li>
  <div class="inputMD" style="position: relative;">
    <input class="phInput" type="password" />
    <span class="phText" style="clear: both; height: 33px; line-height: 33px; color: #aaa; position: absolute; left: 10px; top: 5px;">请输入密码</span>
  </div>
</li>

Kod js adalah seperti berikut (saya hanya menulis fungsi, tiada borang pemalam, haha):

function _placeholderText(phInput, phText) { //定义函数，传递2个参数——input输入框和text提示文本的id或者class
  var $input = $(phInput);
  var $text = $(phText);
  $input.each(function() { //页面加载时遍历所有仿placeholder的input
    var _this = $(this);
    var _text = _this.siblings(phText);
    if($.trim(_this.val()) == '') {
      _this.val("");
      _text.show();
    } else {
      _text.hide();
    }
  });
  $text.on('click', function() { //点击提示信息，input获取焦点
    $(this).siblings(phInput).focus();
  });
  $input.on('input propertychange blur', function() { //为input注册事件，value值改变（其实是属性发生变化）时以及失去焦点时判断value值是否为空
    var _this = $(this);
    if(_this.val() == '') {
      _this.siblings(phText).show();
    } else {
      _this.siblings(phText).hide();
    }
  });
}

_placeholderText('.phInput', '.phText'); //调用函数

Ringkasan peribadi: Penyelesaian 1 sesuai untuk halaman log masuk, tetapi ia tidak sesuai untuk borang borang latar belakang dan halaman carian bahagian hadapan, kerana ia perlu menambah label teks gesaan baharu, yang tidak begitu mesra.

Pilihan 2:

Juga tinggalkan pemegang tempat atribut asal dan tambahkan atribut phText="nombor telefon bimbit/alamat e-mel" untuk d5fd7aea971a85678ba271703566ebfd. Secara lalai, nilainya ialah teks gesaan dan warnanya kelabu apabila d5fd7aea971a85678ba271703566ebfd kosong, Nilai nilai ialah teks gesaan. Kod js adalah seperti berikut:

function inputJsDIY(obj, colorTip, colorTxt) { //定义函数，传递3个参数——DOM对象、提示文本的颜色值、输入文本的颜色值
  colorTip = colorTip || '#aaaaaa';
  colorTxt = colorTxt || '#666666';
  obj.each(function() {
    var _this = $(this);
    _this.css({"color": colorTip}); //输入框颜色默认置为提示文本的颜色值
    if($.trim(_this.val()) == "") { //判断value值是否为空，若为空则value值赋值等于提示文本
      _this.val(_this.attr("phText"));
    } else if(_this.val() != _this.attr("phText")) {
      _this.css({"color": colorTxt}); //正常的输入文本颜色值
    }
  });
  obj.on("focus", function() { //获取焦点时做判断
    var _this = $(this);
    var value = _this.val();
    if(value == _this.attr("phText")) {
      _this.val("");
    }
    _this.css({"color": colorTxt});
  });
  obj.on("blur", function() { //失去焦点时做判断
    var _this = $(this);
    var value = _this.val();
    if($.trim(value) == "") {
      _this.val($(this).attr("phText")).css({"color": colorTip});
    }
  });
  obj.parents("form").on("submit", function() { //提交表单时去除提示文本（把提示文本置空）
    obj.each(function() {
      var _this = $(this);
      if(_this.val() == _this.attr("phText")) {
        _this.val("");
      }
    });
  });
}

inputJsDIY($('.phInput'), '#aaa', '#666'); //调用函数

Ringkasan peribadi: Pilihan 2 lebih sesuai untuk borang halaman hujung belakang dan halaman carian hujung hadapan Ia mudah dikendalikan dan tidak mempunyai teg tambahan. Kelemahannya ialah ia tidak boleh digunakan untuk jenis kata laluan d5fd7aea971a85678ba271703566ebfd, dan teks gesaan hilang apabila d5fd7aea971a85678ba271703566ebfd mendapat fokus (apabila nilainya sama dengan nilai atribut phText), yang berbeza daripada atribut pemegang tempat asal.

Selain itu, anda juga boleh menukar atribut phText kepada atribut pemegang tempat Penyemak imbas yang disokong akan memaparkan kesan asal Penyemak imbas yang tidak disokong akan menggunakan js untuk menentukan {'placeholder' dalam document.createElement('input')} untuk memanggil. fungsi pilihan kedua. Kompromi ini juga mempunyai kelemahannya, dan hasilnya tidak betul-betul sama merentas pelayar.

Pilihan tiga:

Tulis kaedah untuk penyemak imbas yang tidak menyokong pemegang tempat Pertama, tetapkan nilai pemegang tempat kepada d5fd7aea971a85678ba271703566ebfd Kemudian apabila d5fd7aea971a85678ba271703566ebfd kepada nilai pemegang tempat, gerakkan kursor ke Depan (this.createTextRange dan this.setSelectionRange). Apabila operasi input berlaku, nilai pertama ditetapkan kepada null, dan kemudian nilai input diterima. Selain itu, untuk 933e2e15d366937809aa07ebcf0aee61, anda perlu menambah e7ed14d9bdc7a2b8e76e037c915be2fc untuk memaparkan teks gesaan apabila operasi input berlaku, anda perlu menambah 074ba50153d4c8ebd10a6d88a7eb6310Sembunyikan, kemudian tunjukkan 933e2e15d366937809aa07ebcf0aee61 Penyelesaian ini juga mempunyai beberapa kelemahan kecil, iaitu, pepijat akan muncul apabila menampal dengan butang tetikus kanan.

Secara umumnya, beberapa pilihan mempunyai kelebihan dan kekurangannya sendiri. Saya lebih suka menggunakan pilihan 1 untuk halaman log masuk Kesan persembahan adalah sama. Ia tidak menyusahkan untuk menambah tab baharu. Borang latar belakang dan halaman carian bahagian hadapan lebih suka pilihan 2, yang mudah dan berkesan, kecuali teks gesaan hilang apabila fokus diperoleh.

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.