Gunakan JS untuk melaksanakan kesan balasan ulasan ruang QQ dengan sempurna

Membalas komen adalah perkara yang sangat biasa, tetapi cara setiap tapak web utama melaksanakannya adalah berbeza. Secara umumnya, terdapat dua cara

1.

Yang paling biasa ialah seperti Youku, @ orang yang ingin anda balas dalam kotak input , dengan cara ini, pengguna boleh mengubah suai @.

Berdasarkan ini, Sina Weibo muncul menu rakan. Kelebihan kaedah ini ialah ia tidak memerlukan sebarang pemprosesan js atau css untuk keserasian.

2.

Seperti ruang QQ, semua orang yang membalas akan dipadamkan. Saya merasakan bahawa kaedah ini lebih baik, tetapi kaedah ini mempunyai beberapa butiran keserasian, yang akan diterangkan secara terperinci kemudian.

Malah, pelaksanaan ruang QQ serasi dengan IE dan pelayar moden, dan ia sangat bagus. Yang di atas ialah chrome

ie8

ie7

Ie6 tidak memuat naik gambar, ia terlalu lambat, semua orang tahu saya akan melampirkan contoh terakhir pada akhirnya, dan sudah tentu ia juga serasi dengan IE6.

Mari kita bercakap tentang cara untuk mencapainya.

Mari kita lihat bagaimana ruang qq dilakukan dahulu

chrome

Seperti yang anda lihat di atas , ruang qq Ia adalah untuk menambah teks pada butang, supaya apabila memadam, seluruh nama pengguna yang telah dibalas boleh dipadamkan.

Tetapi ini tidak mencukupi. Anda perlu menetapkan butang kepada sekatan sebaris

Alih keluar latar belakang telus lalai. Sudah tentu, tetapkan padding dan margin kepada 0

button{ border: 0; background:none; }

Pada masa ini, apabila memasukkan dalam IE6, 7, anda akan dapati nampaknya terdapat padding, dan ia masih sangat besar

Jadi anda perlu menambah limpahan: visible;

Selain itu, atribut contenteditable ditetapkan kepada false, jika tidak kursor akan melompat ke butang,

Kemudian anda akan dapati di bawah ie8, jika terdapat Tekan Enter, dan kemudian semasa proses pemadaman, anda akan mendapati bahawa label butang tidak boleh dipadam, kursor akan bergerak di hadapan label butang, dan menekan kekunci kursor kanan sekali lagi atau mengklik sebelah kanan label butang dengan tetikus tidak akan menyebabkan kursor bergerak ke sebelah kanan label butang. Malah, ruang qq juga mempunyai masalah ini dalam ie8

ie8

Tetapi di bawah ie6 dan 7, tiada masalah sedemikian

iaitu7

iaitu6

Di sini, untuk ie8, anda perlu mengikat check_comment acara kekunci balik ke kotak teks Tidak ada masalah jika anda mengikatnya untuk ie6 dan 7. Di sini, ia terikat kepada ie seragam.

function getPositionForTextArea(ctrl) { //获取光标位置
      var CaretPos = 0; 
      if(document.selection) {
        ctrl.focus(); 
        var Sel = document.selection.createRange(); 
        var Sel2 = Sel.duplicate(); 
        Sel2.moveToElementText(ctrl); 
        var CaretPos = -1; 
        while(Sel2.inRange(Sel)){ 
          Sel2.moveStart('character'); 
          CaretPos++; 
        } 
      }else if(ctrl.selectionStart || ctrl.selectionStart == '0'){
        CaretPos = ctrl.selectionStart; 
      } 
      return (CaretPos); 
    }
      vm.check_comment=function(e,i){
        var a=getPositionForTextArea($('reply'+i));
        if(e.keyCode==8&&a<3){
          var pat = new RegExp("^.*? $",&#39;i&#39;);
          if(pat.test(this.innerHTML))
            this.innerHTML=&#39;&#39;;
        }
      };

Kedudukan kursor

Selain itu, label p dililitkan pada label butang dalam ungkapan biasa kerana apabila IE menekan Enter untuk. menukar baris, ia secara automatik akan menukar yang sebelumnya secara lalai Baris membalut tag p. Sudah tentu, pada mulanya, tag p mesti dibalut di luar tag butang dalam kotak input.

Digression

ruang qq menggunakan tag img pada ff

Saya sentiasa berfikir bahawa ruang QQ menggunakan teg img dalam pelayar moden, saya mendapati bahawa teg butang telah digunakan dalam chrome Jadi saya cuba memasukkan tag img dalam chrome sempadan tidak boleh dialih keluar dan apabila memadamkan, pertimbangan kedudukan kursor dalam pengikatan akan tidak konsisten dengan IE, kerana penyemak imbas moden memasukkan
secara lalai untuk pemisah baris, jadi saya hanya menggunakan teg butang untuk Chrome.

Selain itu, dalam contoh saya, jika label butang dimasukkan ke dalam ff, kotak input tidak akan mudah mendapat fokus. Saya terlalu malas untuk menukarnya. Saya masih memasukkan teg img dalam ff. kotak input.

if(!!-[1,]&&e.keyCode==8&&$('reply'+i).childNodes.length==2){//ff
          this.innerHTML='';
          return;
        }

Kesan akhir

chrome

ff

ie8

ie7

ie6

Das Obige ist der gesamte Inhalt dieses Artikels , ich hoffe es gefällt euch allen.

Verwandte Artikel:

Lösung für PHP-Kommentarantworten

Wie implementiert man Infinitus-Verschachtelung in PHP-Kommentarantworten? Der Basiscode wurde geschrieben und ich freue mich darauf, dass Experten meine Fragen beantworten

Verwendung von drahtlosen PHP-Ebenen zur Klassifizierung von Kategorien zur Implementierung der Kommentar-Antwortfunktion