Ringkasan penyelesaian untuk mencapai effect_jquery pemegang tempat

Pemegang tempat ialah atribut html5 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 . Secara lalai, nilainya ialah teks gesaan dan warnanya kelabu apabila 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 , dan teks gesaan hilang apabila 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 Kemudian apabila 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 , anda perlu menambah untuk memaparkan teks gesaan apabila operasi input berlaku, anda perlu menambah Sembunyikan, kemudian tunjukkan 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.