白开心
  IT博客 :: 首页 ::  :: 联系 :: 聚合  :: 管理 ::
  9 随笔 :: 76 文章 :: 28 评论 :: 0 Trackbacks
JS应用(文本框输入出现自动提示框和右键菜单)

 

  1<%@ Control Language="C#" AutoEventWireup="true" CodeFile="AutoComplete.ascx.cs" Inherits="AutoComplete" %>
  2<script language="javascript">
  3var searchText,keyRows;
  4var mouseOverColor = "#8985CF";
  5var mouseOutColor = "#efefef";
  6var inputs = document.getElementsByTagName("input");
  7for(var i =0;i<inputs.length;i++)
  8{
  9    if(inputs[i].id.indexOf("InputKeywords") > -1)
 10    {
 11        searchText = inputs[i];
 12    }
 13}
 14
 15/****************************************/
 16/*
 17    以下是对搜索输入框的修饰，加入输入提示框，右键菜单功能。
 18    输入提示框后台取数据使用 AJAX
 19    右键菜单全部 JS 功能。  ---------- HJ
 20*/
 21/****************************************/
 22if(searchText != null)
 23{
 24    searchText.autocomplete = "off";
 25    searchText.onmousedown=function()
 26    { /// 右键菜单
 27        rightMenu();
 28    }
 29    searchText.onkeyup = function()
 30    {  /// 自动搜索输入提示框
 31        if(window.event.keyCode != "40" && window.event.keyCode != "38")
 32        {/// 不是上下两个方向键
 33            keyRows = null;  /// 将选择关键字的指针变量清空；
 34            if(this.value != "")
 35            {
 36                createList(this.value);
 37            }
 38            else
 39            {
 40                RemoveList();
 41            }
 42        }
 43    }
 44}
 45
 46/// 用户按下回车键自动跳转页面 Add By HJ 2007-12-5
 47document.body.onclick=function()
 48{
 49    hideMenu();
 50    RemoveList();
 51}
 52
 53document.body.onkeydown = function()
 54{
 55    /// 用户按下回车键自动跳转页面 Add By HJ 2007-12-5
 56    var page;
 57    page = document.getElementById("GoToPageIndex");
 58    if(page!=null)
 59    {
 60        var PageIndex=page.value;
 61        if(window.event.keyCode == "13" && PageIndex != "")
 62        {
 63            goToPage();
 64        }
 65    }
 66    
 67    /// 自动选择相关提示列
 68    var trCount;
 69    var table = document.getElementById("keyTable");
 70    if(table != null)
 71    {
 72    trCount = table.firstChild.childNodes.length - 2;
 73    debugger;
 74    if(window.event.keyCode == "40")
 75    {/// 向下
 76        if(keyRows == null)keyRows=0;
 77        else if(keyRows>=trCount)
 78        {
 79            table.firstChild.childNodes[keyRows].bgColor = mouseOutColor;
 80            keyRows = 0;
 81        }
 82        else
 83        {
 84            table.firstChild.childNodes[keyRows].bgColor = mouseOutColor;
 85            keyRows++;
 86        }
 87        table.firstChild.childNodes[keyRows].bgColor = mouseOverColor;
 88        if(searchText != null) searchText.value = table.firstChild.childNodes[keyRows].firstChild.innerText;
 89        table.firstChild.childNodes[keyRows].focus();
 90    }
 91    else if(window.event.keyCode == "38")
 92    {/// 向上
 93        if(keyRows == null)
 94        {
 95            keyRows=0;
 96        }
 97        else if(keyRows==0)
 98        {
 99            table.firstChild.childNodes[keyRows].bgColor = mouseOutColor;
100            keyRows = trCount;
101        }
102        else
103        {
104            table.firstChild.childNodes[keyRows].bgColor = mouseOutColor;
105            keyRows--;
106        }
107        table.firstChild.childNodes[keyRows].bgColor = mouseOverColor;
108        if(searchText != null) searchText.value = table.firstChild.childNodes[keyRows].firstChild.innerText;
109        table.firstChild.childNodes[keyRows].focus();
110    }
111    }
112}
113
114/*******************************************
115加入右键菜单处理 HJ
1162007-12-26
117*******************************************/
118//显示菜单
119function showMenu()
120{
121     nocontextmenu(true);
122     
123     var X,Y;
124     Y = document.body.scrollTop+event.clientY;
125     X = document.body.scrollLeft+event.clientX;
126     var obj = document.getElementById("showContent");
127     if(obj == null)return;
128     
129     //控制菜单不超过边界
130     if(parseInt(obj.width) + parseInt(X) > window.screen.width)
131     {
132        X -= parseInt(obj.width);
133     }
134
135     if(parseInt(obj.height) + parseInt(Y) > window.screen.height)
136     { 
137        Y -= parseInt(obj.height);
138     }
139     obj.style.display = "block";
140     obj.style.left=X.toString()+"px";
141     obj.style.top =Y.toString()+"px";
142}
143
144//隐藏菜单
145function hideMenu()
146{
147    document.oncontextmenu = "";
148    var obj = document.getElementById("showContent");
149    if(obj != null)
150    {
151        obj.style.display = "none";
152    }
153    nocontextmenu(false);
154}
155
156//屏蔽系统的右键菜单
157function nocontextmenu(hid)
158{ 
159     event.cancelBubble = hid 
160     event.returnValue = !hid;
161}
162
163/*如果当前浏览器是Internet Explorer，document.all就返回真*/
164function rightMenu()
165{
166    if (document.all && window.print)
167    {
168        if(event.button == 2)
169        {
170            document.oncontextmenu = showMenu;
171        }
172        else
173        {
174            hideMenu();
175        }
176    }
177}
178
179///右键菜单事件
180function searchStartKey(keyValue)
181{
182    if(searchText != null)
183    {
184        var val = searchText.value;
185        for(var i=0;i<searchStartKeys.length;i++)
186        {
187            if(val.indexOf(searchStartKeys[i]) == 0)
188            {
189                val = val.substr(searchStartKeys[i].length);
190                break;
191            }
192        }
193        searchText.value = keyValue + val;
194        searchText.focus();
195        setCursorPos(searchText);
196    }
197}
198
199function searchJoinType(typeName)
200{
201    if(searchText != null && searchText.value != "")
202    {
203        searchText.value += " " + typeName + " ";
204        searchText.focus();
205        setCursorPos(searchText);
206    }
207}
208
209///光标停留在文本框的最后面
210 function setCursorPos(x)
211 {   
212      var txtRange = x.createTextRange();   
213      txtRange.moveStart("character", x.value.length);   
214      txtRange.moveEnd("character",0);   
215      txtRange.select();
216  }
217/*****************
218End
219******************/
220
221
222
223/***************************
224模仿 Google 搜索框，输入关键字时出现相匹配的下拉框
225Create By HJ 2008-2-20
226****************************/
227function RemoveList()
228{
229    var div = document.getElementById("QuickSearch");
230        if(div != null)
231        {
232            div.innerHTML = "";
233        }
234}
235
236function setSerachValue(str)
237{
238    if(searchText != null)
239    {
240        searchText.value = str;
241    } 
242}
243
244function createList(obj)
245{
246    /// 创建一个Div，显示在输入框的下方
247    var RankWords = AjaxService.getRankWords(obj).value;
248    if(RankWords == null || RankWords == "")
249    {
250        RemoveList();
251        return;
252    }
253    var Div;
254    Div = document.getElementById("QuickSearch");
255
256    var Table = document.createElement("table");
257    var tableValign = document.createAttribute("valign");    //创建属性
258    tableValign.value="top";
259    Table.setAttributeNode(tableValign); //添加属性
260    tableValign = document.createAttribute("id");    //创建属性
261    tableValign.value="keyTable";
262    Table.setAttributeNode(tableValign); //添加属性
263    tableValign = document.createAttribute("cellpadding");    //创建属性
264    tableValign.value="0";
265    Table.setAttributeNode(tableValign); //添加属性
266    tableValign = document.createAttribute("cellspacing");    //创建属性
267    tableValign.value="0";
268    Table.setAttributeNode(tableValign); //添加属性
269    tableValign = document.createAttribute("border");    //创建属性
270    tableValign.value="0";
271    Table.setAttributeNode(tableValign); //添加属性
272    Table.style.width = searchText.style.width;
273    
274    var Keys = RankWords.split("$$");
275    var Tr,Td1,Td2,Td1Text,Td2Text,Td1Align,Td2Align;
276    var Td2Font,FontText,FontColor;
277    var Key,RowCounts;
278    for(var i=0;i<Keys.length;i++)
279    {
280        Key = Keys[i].substring(0,Keys[i].indexOf("||"));
281        RowCounts = Keys[i].substr(Keys[i].indexOf("||")+2);
282        Tr = document.createElement("tr");
283        TrClick = document.createAttribute("onclick");    //创建属性
284        TrClick.value="setSerachValue('"+Key+"');";
285        Tr.setAttributeNode(TrClick); //添加属性
286        TrClick = document.createAttribute("onmousemove");    //创建属性
287        TrClick.value="if(keyRows!=null)this.parentNode.childNodes[keyRows].bgColor=mouseOutColor;this.bgColor='"+mouseOverColor+"';";
288        Tr.setAttributeNode(TrClick); //添加属性
289        TrClick = document.createAttribute("onmouseout");    //创建属性
290        TrClick.value="this.bgColor='"+mouseOutColor+"';";
291        Tr.setAttributeNode(TrClick); //添加属性
292        Tr.style.cursor = "hand";
293
294        Td1 = document.createElement("td");
295        Td2 = document.createElement("td");
296        Td1Text = document.createTextNode(Key);
297        
298        Td2Font = document.createElement("font");
299        FontColor = document.createAttribute("color");    //创建属性
300        FontColor.value="#008000";
301        Td2Font.setAttributeNode(FontColor); //添加属性
302
303        FontText = document.createTextNode(RowCounts+"结果");
304        Td2Font.appendChild(FontText);
305        Td2.appendChild(Td2Font);
306        
307        Td1Align = document.createAttribute("align");    //创建属性
308        Td1Align.value="left";
309        Td1.setAttributeNode(Td1Align); //添加属性
310        
311        Td2Align = document.createAttribute("align");    //创建属性
312        Td2Align.value="right";
313        Td2.setAttributeNode(Td2Align); //添加属性
314        
315        Td1.appendChild(Td1Text);
316        Tr.appendChild(Td1);
317        Tr.appendChild(Td2);
318        Tr.bgColor= mouseOutColor;
319        Table.appendChild(Tr);
320    }
321    /// 创建一个关闭行
322    Tr = document.createElement("tr");
323    Td1 = document.createElement("td");
324    Td1Align = document.createAttribute("align");    //创建属性
325    Td1Align.value="right";
326    Td1.setAttributeNode(Td1Align); //添加属性
327    Td1Align = document.createAttribute("colspan");    //创建属性
328    Td1Align.value="2";
329    Td1.setAttributeNode(Td1Align); //添加属性
330    
331    var aClose = document.createElement("a");
332    Td1Align = document.createAttribute("href");    //创建属性
333    Td1Align.value="#";
334    aClose.setAttributeNode(Td1Align); //添加属性
335    Td1Align = document.createAttribute("onclick");    //创建属性
336    Td1Align.value="RemoveList();";
337    aClose.setAttributeNode(Td1Align); //添加属性
338    aCloseText = document.createTextNode("关闭");
339    aClose.appendChild(aCloseText);
340    Td1.appendChild(aClose);
341    Tr.appendChild(Td1);
342    Tr.bgColor= mouseOutColor;
343    Table.appendChild(Tr);
344    
345    Div.innerHTML = Table.outerHTML;
346    var a =    getElementPos(searchText);
347    Div.style.left = a.x;
348    Div.style.top = a.y+20;    
349}
350
351/// 获取控件的位置
352function getElementPos(el) 
353{
354    var ua = navigator.userAgent.toLowerCase();
355    var isOpera = (ua.indexOf('opera') != -1);
356    var isIE = (ua.indexOf('msie') != -1 && !isOpera); // not opera spoof
357
358    if(el.parentNode === null || el.style.display == 'none')
359    {
360        return false;
361    }
362
363    var parent = null;
364    var pos = [];
365    var box;
366    if(el.getBoundingClientRect) //IE
367    {
368        box = el.getBoundingClientRect();
369        var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
370        var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
371        return {x:box.left + scrollLeft, y:box.top + scrollTop};
372    }
373    else if(document.getBoxObjectFor) // gecko
374    {
375        box = document.getBoxObjectFor(el);
376        var borderLeft = (el.style.borderLeftWidth)?parseInt(el.style.borderLeftWidth):0;
377        var borderTop = (el.style.borderTopWidth)?parseInt(el.style.borderTopWidth):0;
378        pos = [box.x - borderLeft, box.y - borderTop];
379    }
380    else // safari & opera
381    {
382        pos = [el.offsetLeft, el.offsetTop];
383        parent = el.offsetParent;
384        if (parent != el) 
385        {
386
387        while (parent) {
388            pos[0] += parent.offsetLeft;
389            pos[1] += parent.offsetTop;
390            parent = parent.offsetParent;
391        }
392    }
393    if (ua.indexOf('opera') != -1
394    || ( ua.indexOf('safari') != -1 && el.style.position == 'absolute' ))
395    {
396        pos[0] -= document.body.offsetLeft;
397        pos[1] -= document.body.offsetTop;
398    }
399    }
400
401    if (el.parentNode) { parent = el.parentNode; }
402    else { parent = null; }
403    while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML')
404    { // account for any scrolled ancestors
405    pos[0] -= parent.scrollLeft;
406    pos[1] -= parent.scrollTop;
407    if (parent.parentNode) { parent = parent.parentNode; }
408    else { parent = null; }
409    }
410    return {x:pos[0], y:pos[1]};
411}
412/***************************
413End
414****************************/
415
416/************************
417复制和粘帖
418*************************/
419function copy()
420{ //复制
421    if(searchText != null)
422    {
423        var clipBoardContent=''; 
424        clipBoardContent = searchText.value;
425        window.clipboardData.setData("Text",clipBoardContent); 
426    }
427} 
428
429function paste()
430{ //粘帖
431    var clipboard = window.clipboardData.getData('text'); 
432    if(clipboard != null && searchText != null)
433    {
434        searchText.value += clipboard;
435    } 
436}
437/************************
438End
439*************************/
440</script>
441
442<div id="QuickSearch" style="position:absolute;filter: alpha(opacity=100); opacity: 0.7;">
443</div>
444<!-- 右键菜单 Start -->
445<div id="showContent" style="z-index: 101; left: 488px; position: absolute; top: 384px;
446    display: none; filter: alpha(opacity=100); opacity: 0.7;" width="100px" height="200px">
447    <table border="1" cellspacing="0" cellpadding="0" width="100px" style="border-collapse: collapse;">
448        <tr height="20px" bgcolor="#efefef" onclick="searchJoinType('and');" onmouseover="this.bgcolor='#ADD8E6';this.style.cursor='pointer';"
449            onmouseout="this.bgcolor='#efefef'">
450            <td>
451                并且</td>
452        </tr>
453        <tr height="20px" bgcolor="#ffffff" onclick="searchJoinType('or');" onmouseover="this.bgcolor='#ADD8E6';this.style.cursor='pointer';"
454            onmouseout="this.bgcolor='#ffffff'">
455            <td>
456                或者</td>
457        </tr>
458        <tr height="20px" bgcolor="#efefef" onclick="copy();" onmouseover="this.bgcolor='#ADD8E6';this.style.cursor='pointer';"
459            onmouseout="this.bgcolor='#efefef'">
460            <td>
461                复制</td>
462        </tr>
463        <tr height="20px" bgcolor="#ffffff" onclick="paste();" onmouseover="this.bgcolor='#ADD8E6';this.style.cursor='pointer';"
464            onmouseout="this.bgcolor='#ffffff'">
465            <td>
466                粘帖</td>
467        </tr>
468    </table>
469</div>
470<!-- 右键菜单 End -->
posted on 2008-02-22 12:17 白开心 阅读(5480) 评论(0)  编辑 收藏 引用 所属分类: JavaScript
只有注册用户登录后才能发表评论。