Αυτό το άρθρο είναι ένα άρθρο καθρέφτη της αυτόματης μετάφρασης, κάντε κλικ εδώ για να μεταβείτε στο αρχικό άρθρο.

Άποψη: 10764|Απάντηση: 0

[JavaScript] Με βάση Sina@ απλό παράδειγμα συνάρτησης

[Αντιγραφή συνδέσμου]
Δημοσιεύτηκε στις 28/6/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. }
Αντιγραφή κώδικα






Προηγούμενος:Το Highcharts συνδυάζει Asp.net για την υλοποίηση δυναμικών παραδειγμάτων εμφάνισης γραφημάτων αποθεμάτων δεδομένων
Επόμενος:Επικύρωση δεδομένων MVC
Αποκήρυξη:
Όλο το λογισμικό, το υλικό προγραμματισμού ή τα άρθρα που δημοσιεύονται από το Code Farmer Network προορίζονται μόνο για μαθησιακούς και ερευνητικούς σκοπούς. Το παραπάνω περιεχόμενο δεν θα χρησιμοποιηθεί για εμπορικούς ή παράνομους σκοπούς, άλλως οι χρήστες θα υποστούν όλες τις συνέπειες. Οι πληροφορίες σε αυτόν τον ιστότοπο προέρχονται από το Διαδίκτυο και οι διαφορές πνευματικών δικαιωμάτων δεν έχουν καμία σχέση με αυτόν τον ιστότοπο. Πρέπει να διαγράψετε εντελώς το παραπάνω περιεχόμενο από τον υπολογιστή σας εντός 24 ωρών από τη λήψη. Εάν σας αρέσει το πρόγραμμα, υποστηρίξτε γνήσιο λογισμικό, αγοράστε εγγραφή και λάβετε καλύτερες γνήσιες υπηρεσίες. Εάν υπάρχει οποιαδήποτε παραβίαση, επικοινωνήστε μαζί μας μέσω email.

Mail To:help@itsvse.com