Cet article est un article miroir de traduction automatique, veuillez cliquer ici pour accéder à l’article original.

Vue: 10764|Répondre: 0

[JavaScript] Basé sur Sina@ fonction exemple simple

[Copié le lien]
Publié sur 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. }
Code de copie






Précédent:Highcharts combine Asp.net pour réaliser des exemples dynamiques de graphiques de stock
Prochain:Validation des données MVC
Démenti:
Tous les logiciels, supports de programmation ou articles publiés par Code Farmer Network sont uniquement destinés à l’apprentissage et à la recherche ; Le contenu ci-dessus ne doit pas être utilisé à des fins commerciales ou illégales, sinon les utilisateurs assumeront toutes les conséquences. Les informations sur ce site proviennent d’Internet, et les litiges de droits d’auteur n’ont rien à voir avec ce site. Vous devez supprimer complètement le contenu ci-dessus de votre ordinateur dans les 24 heures suivant le téléchargement. Si vous aimez le programme, merci de soutenir un logiciel authentique, d’acheter l’immatriculation et d’obtenir de meilleurs services authentiques. En cas d’infraction, veuillez nous contacter par e-mail.

Mail To:help@itsvse.com