| 在定义描述用户脚本及其函数、全局变量和高亮标签的必要元数据之后,将添加 load 和 keyup 事件侦听程序以处理用户生成的事件.清单 2 详细说明了负载事件侦听程序所调用的 addHighlightStyle 函数.
清单 2. addHighlightStyle 函数
function addHighlightStyle(css)
{
var head = document.getElementsByTagName(''head'')[0];
if( !head ) { return; }
var style = document.createElement(''style'');
var cssStr = "high {color: black; background-color: yellow; }";
style.type = ''text/css'';
style.innerHTML = cssStr;
head.appendChild(style);
}//addHighlightStyle
| 该函数将用相应的高亮显示的信息在当前的 DOM 结构中创建一个新节点.在本例中,它是简单的黑底黄字文本属性.清单 3 显示了另一个事件侦听程序 globalKeyPress 以及 boxKeyPress 函数的代码.
清单 3. globalKeyPress、boxKeyPress 函数
function globalKeyPress(e)
{
// add the user interface text area and button, set focus and event listener
if( boxAdded == false && e.altKey && e.keyCode == 61 )
{
boxAdded = true;
var boxHtml = "<textarea wrap=''virtual'' id=''sBoxArea'' "
"style=''width:300px;height:20px''></textarea>"
"<input name=''btnHighlight'' id=''tboxButton'' "
"value=''Highlight'' type=''submit''>";
var tArea = document.createElement("div");
tArea.innerHTML = boxHtml;
document.body.insertBefore(tArea, document.body.firstChild);
tArea = document.getElementById("sBoxArea");
tArea.focus();
tArea.addEventListener(''keyup'', boxKeyPress, true );
var btn = document.getElementById("tboxButton");
btn.addEventListener(''mouseup'', processSearch, true );
}//if alt = pressed
}//globalKeyPress
function boxKeyPress(e)
{
if( e.keyCode != 13 ){ return; }
var textarea = document.getElementById("sBoxArea");
textarea.value = textarea.value.substring(0,textarea.value.length-1);
processSearch();
}//boxKeyPress
| 捕捉每次击键并且侦听特定组合是 globalKeyPress 的目的.按下 Alt = 组合键后（即,按住 Alt 键的同时按下 = 键）,将把搜索框的用户界面添加到当前 DOM 中.此界面包含输入关键字的文本区域和 Submit 按钮.在添加新条目后,需要通过 getElementById 函数选择文本区域以正确设置焦点.然后添加事件侦听程序以处理文本区域中的击键,并且在单击 Submit 按钮后执行搜索.
清单 3 中的第二个函数将处理文本区域中的每次击键.如果按下 Enter 键,文本区域的值将删除新行并且执行 processSearch 函数.清单 4 详细说明了 processSearch 函数.
清单 4. processSearch 函数
function processSearch()
{
// remove any existing highlights
if( lastSearch != null )
{
var splitResult = lastSearch.split( '' '' );
removeIndicators( splitResult[0] );
}//if last search exists
var textarea = document.getElementById("sBoxArea");
if( textarea.value.length > 0 )
{
var splitResult = textarea.value.split( '' '' );
if( splitResult.length == 1 )
{
oneWordSearch( splitResult[0] );
}else if( splitResult.length == 2 )
{
twoWordSearch( splitResult[0], splitResult[1] );
}else
{
textarea.value = "Only two words supported";
}//if number of words
}//if longer than required
lastSearch = textarea.value;
}//processSearch
|
|
