js kotak teks input kandungan kemahiran effect_javascript pintar pintar-tutorial js-php.cn

js kotak teks input kandungan kemahiran effect_javascript pintar pintar

WBOY

Lepaskan： 2016-05-16 15:27:58

asal

1762 orang telah melayarinya

Contoh dalam artikel ini menerangkan kod kesan gesaan pintar untuk kandungan input kotak teks js. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Tangkapan skrin kesan berjalan adalah seperti berikut:

Idea umum:

1. Dengar acara kotak teks. Berikut ialah acara keyup yang digunakan. Anda boleh cuba menggunakan acara onchange. Tetapi saya merasakan bahawa kesan acara keyup adalah lebih baik.

2. Akses data latar belakang secara tidak segerak melalui ajax mengikut kandungan input.

3. Lintas data yang dikembalikan dan tambahkan data pada kawasan paparan.

4. Semasa menambah data, tambahkan beberapa kesan pada setiap bahagian data Klik salah satu data untuk mengisi data ke dalam kotak teks, dan kandungan segera akan hilang.

5. Data latar belakang harus disambungkan ke dalam format json.

Kod khusus adalah seperti berikut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title>自动提示</title>
 <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
 <script type="text/ecmascript">
  function txtchange() {
   var nnmae = $("#intxt").val();
   $.ajax({
    type: "post",
    url: "ashx/AutoNote.ashx",
    data: { name: nnmae },
    dataType: "json",
    success: function (data) {
     $("#tbcontent").html(""); //删除原有数据
     if (data != "null") {
      for (var i = 0; i < $(data).length; i++) {
       $("#tbcontent").append('<div class="item" onclick="mousedown(this)">' + data[i].name + '</div>');
      }
      $("#tbcontent").slideDown();
     }
    }
   });
  }
  //选择其中的提示内容
  function mousedown(object) {
   $("#intxt").val($(object).text());
   $("#tbcontent").fadeOut();
  }
  //文档框失去焦点，隐藏提示内容
  function lost() {
   $("#tbcontent").fadeOut();
  }
 </script>
 <style type="text/css">
  .item:hover
  {
   background-color: Gray;
   cursor:pointer;
  }
  .show
  {
   width: 200px;
   z-index: 10;
   display: block;
  }
  .hidden
  {
   width: 200px;
   z-index: 10;
   display: none;
   border:1px solid rgb(80,160,91);
   border-top:none;
  }
  table tr td
  {
   margin:none;
   padding:none;
   border:none;
  }
 </style>
</head>
<body>
 <form id="form1" runat="server">
 <div style="width: 210px; margin-left:auto; margin-right:auto">
  <table>
   <tr>
    <td>
     <input type="text" style="width: 200px;" id="intxt" onkeyup="txtchange()" onblur="lost()"/>
    </td>
   </tr>
   <tr>
    <td>
     <div id="tbcontent" class="hidden">
     </div>
    </td>
   </tr>
  </table>
 </div>
 </form>
</body>
</html>

Salin selepas log masuk

Kesan pantas pintar untuk kandungan input dalam kotak teks js sangat praktikal untuk kami memasukkan maklumat dan mencari. Saya harap artikel ini akan membantu semua orang dalam mempelajari pengaturcaraan javascript.