Bu makale makine çevirisi ayna makalesidir, orijinal makaleye geçmek için lütfen buraya tıklayın.

Görünüm: 10764|Yanıt: 0

[JavaScript] Basit Sina@ fonksiyon örneğine dayanarak

[Bağlantıyı kopyala]
Yayınlandı 28.06.2015 10:15:30 | | |
  1. ////---------------------------------@发布---------------------------//
  2. function textChange(options) {
  3.     var opt = $.extend({
  4.         Content: ''
  5.     }, options);
  6.     var objId = opt.Content;
  7.     var obj = $("#" + objId);
  8.     obj.keydown(function (evt) {
  9.         var k = window.event ? evt.keyCode : evt.which;
  10.         var isChrome = window.navigator.userAgent.indexOf("Chrome") !== -1;
  11.         if (isChrome&&k==16) {
  12.             k=50;
  13.         }
  14.         //为@键值时
  15.         //这里监听输入框的keyup事件
  16.         //不为空 && 不为上箭头或下箭头或回车
  17.         if (k == 50 && evt.shiftKey) {
  18.             buildTip(obj, '');
  19.         }
  20.         else if (k == 13 || k == 38 || k == 40) { //回车
  21.             if ($('#searchresult ul').length > 0) {
  22.                 if (k == 38) { //上箭头
  23.                     $('#searchresult a.searchHover').parent().prev().find("a").addClass("searchHover");
  24.                     $('#searchresult a.searchHover').parent().next().find("a").removeClass("searchHover");
  25.                 } else if (k == 40) { //下箭头
  26.                     $('#searchresult a.searchHover').parent().next().find("a").addClass("searchHover");
  27.                     $('#searchresult a.searchHover').parent().prev().find("a").removeClass("searchHover");
  28.                 } else if (k == 13) { //回车
  29.                     var selContent = $('#searchresult a.searchHover').attr('rname');
  30.                     if (selContent == "" || selContent == undefined) return;
  31.                     var content = selContent + ' ';

  32.                     //移除textarea里面@后面多余数据
  33.                     var pointIndex = getPositionForTextArea(obj[0]);
  34.                     var searchName = "";
  35.                     var atIndex = obj.val().substring(0, pointIndex).lastIndexOf("@", atIndex);
  36.                     obj.val(obj.val().substring(0, atIndex + 1) + obj.val().substring(pointIndex));

  37.                     var newIndex = getPositionForTextArea(obj[0]);
  38.                     setCursorPosition(obj[0], newIndex - (newIndex - atIndex - 1));

  39.                     resetPostion(content, obj);
  40.                     $("#searchresult").remove();
  41.                 }
  42.                 evt.returnValue = false;
  43.                 return false;
  44.             }
  45.         }
  46.         else {
  47.             //$("#searchresult").remove();
  48.         }
  49.     });

  50.     obj.keyup(function (evt) {
  51.         var k = window.event ? evt.keyCode : evt.which;
  52.         if (k != 13 && k != 38 && k != 40) {
  53.             if ($('#searchresult ul').length > 0) {
  54.                 var pointIndex = getPositionForTextArea(obj[0]);
  55.                 var searchName = "";
  56.                 var atIndex = obj.val().substring(0,pointIndex).lastIndexOf("@", atIndex);
  57.                 searchName = obj.val().substring(atIndex + 1, pointIndex);
  58.                 buildTip(obj, searchName);
  59.             }
  60.         }
  61.     });
  62. }

  63. //构建提示信息
  64. function buildTip(obj, serachname) {
  65.     $.ajax({
  66.         type: 'post',
  67.         url: '',
  68.         data: '',
  69.         dataType: 'json',
  70.         success: function (data) {
  71.             var objData = data.list;
  72.             if (objData.length > 0) {
  73.                 if ($("#searchresult").length > 0)
  74.                     $("#searchresult").remove();
  75.                 var layer = "";
  76.                 layer = "<div id='searchresult'><ul>";
  77.                 $.each(objData, function (idx, item) {
  78.                     layer += "<li><a href='javascrip去掉t:void(0);' ></a></li>";
  79.                 });
  80.                 layer += "</ul></div>";

  81.                 //将结果添加到div中
  82.                 obj.after($(layer));
  83.                 $("#searchresult a:first").addClass("searchHover");
  84.                 $("#searchresult").css("display", "");

  85.                 //鼠标点击事件
  86.                 $("#searchresult a").click(function () {
  87.                     var content = $(this).attr('rname') + ' ';
  88.                     resetPostion(content, obj);
  89.                     $("#searchresult").empty();
  90.                     $("#searchresult").css("display", "none");
  91.                 });

  92.                 $("#searchresult a").each(function () {
  93.                     $(this).mouseover(function (e) {
  94.                         $("#searchresult a").removeClass("searchHover");
  95.                         $(this).addClass("searchHover");
  96.                     });
  97.                 });

  98.                 //evt.stopPropagation();

  99.                 //处理js事件冒泡问题
  100.                 $('body').bind("click", function (e) {
  101.                     $("#searchresult").remove();
  102.                     e.stopPropagation();
  103.                 });
  104.                 $("#searchresult").bind("click", function (e) {
  105.                     e.stopPropagation();
  106.                 });

  107.             } else {
  108.                 $("#searchresult").remove();
  109.             }
  110.         }
  111.     });
  112. }

  113. var cpos = 0;
  114. function resetPostion(content, target) {
  115.     var tc = target[0];

  116.     if (document.selection) {//ie
  117.         target.bind("click keyup", function (e) {//点击或键盘动作时设置光标值
  118.             e.stopPropagation();
  119.             cpos = getPositionForTextArea(tc);
  120.         });
  121.     }
  122.     var tclen = target.val().length;
  123.     var pos = 0;
  124.     if (typeof document.selection != "undefined") {//IE
  125.         target.focus();
  126.         //setCursorPosition(tc, cpos);//设置焦点
  127.         document.selection.createRange().text = content;
  128.         //计算光标位置
  129.         pos = getPositionForTextArea(tc);
  130.     } else {//火狐
  131.         //计算光标位置
  132.         pos = tc.selectionStart + content.length;
  133.         target.val(target.val().substr(0, tc.selectionStart) + content + target.val().substring(tc.selectionStart, tclen));
  134.     }
  135.     cpos = pos;
  136.     setCursorPosition(tc, pos); //设置焦点
  137. }

  138. //textarea设置光标位置
  139. function setCursorPosition(ctrl, pos) {
  140.     if (ctrl.setSelectionRange) {
  141.         ctrl.focus();
  142.         ctrl.setSelectionRange(pos, pos);
  143.     } else if (ctrl.createTextRange) {// IE Support
  144.         var range = ctrl.createTextRange();
  145.         range.collapse(true);
  146.         range.moveEnd('character', pos);
  147.         range.moveStart('character', pos);
  148.         range.select();
  149.     }
  150. }

  151. //获取多行文本框光标位置
  152. function getPositionForTextArea(obj, content) {
  153.     var CaretPos = -1;
  154.     if (typeof document.selection != "undefined") {//IE
  155.         var Sel = document.selection.createRange();
  156.         var Sel2 = Sel.duplicate();
  157.         Sel2.moveToElementText(obj);
  158.         while (Sel2.inRange(Sel)) {
  159.             Sel2.moveStart('character');
  160.             CaretPos++;
  161.         }
  162.     }
  163.     else {
  164.         if (content == undefined)
  165.             content = "";
  166.         CaretPos = obj.selectionStart + content.length;
  167.     }
  168.     return CaretPos;

  169. }
Kopya kodu






Önceki:Highcharts, dinamik veri stok grafik görüntüleme örnekleri oluşturmak için Asp.net birleştirir
Önümüzdeki:MVC Veri Doğrulaması
Feragatname:
Code Farmer Network tarafından yayımlanan tüm yazılım, programlama materyalleri veya makaleler yalnızca öğrenme ve araştırma amaçları içindir; Yukarıdaki içerik ticari veya yasa dışı amaçlarla kullanılamaz, aksi takdirde kullanıcılar tüm sonuçları ödemelidir. Bu sitedeki bilgiler internetten alınmakta olup, telif hakkı anlaşmazlıklarının bu siteyle hiçbir ilgisi yoktur. Yukarıdaki içeriği indirmeden sonraki 24 saat içinde bilgisayarınızdan tamamen silmelisiniz. Programı beğendiyseniz, lütfen orijinal yazılımı destekleyin, kayıt satın alın ve daha iyi orijinal hizmetler alın. Herhangi bir ihlal olursa, lütfen bizimle e-posta yoluyla iletişime geçin.

Mail To:help@itsvse.com