Acest articol este un articol oglindă al traducerii automate, vă rugăm să faceți clic aici pentru a sări la articolul original.

Vedere: 10764|Răspunde: 0

[JavaScript] Pe baza Sina@ exemplu simplu al funcției

[Copiază linkul]
Postat pe 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. }
Cod de copiere






Precedent:Highcharts combină Asp.net pentru a realiza exemple dinamice de grafice stock
Următor:Validarea datelor MVC
Disclaimer:
Tot software-ul, materialele de programare sau articolele publicate de Code Farmer Network sunt destinate exclusiv scopurilor de învățare și cercetare; Conținutul de mai sus nu va fi folosit în scopuri comerciale sau ilegale, altfel utilizatorii vor suporta toate consecințele. Informațiile de pe acest site provin de pe Internet, iar disputele privind drepturile de autor nu au legătură cu acest site. Trebuie să ștergi complet conținutul de mai sus de pe calculatorul tău în termen de 24 de ore de la descărcare. Dacă îți place programul, te rugăm să susții software-ul autentic, să cumperi înregistrarea și să primești servicii autentice mai bune. Dacă există vreo încălcare, vă rugăm să ne contactați prin e-mail.

Mail To:help@itsvse.com