JavaScript中的加速器UI_Javascript_Events_User Interface_Accelerator

JavaScript中的加速器UI

javascript events user-interface

JavaScript中的加速器UI,javascript,events,user-interface,accelerator,Javascript,Events,User Interface,Accelerator,我可以在客户端使用JavaScript创建类似Internet Explorer加速器的东西吗我希望当用户在页面上选择一些文本时，会显示一个可单击的图标我应该等待的事件是什么？最好的方法可能是在页面上设置一个mouseup侦听器，该侦听器调用一个函数来测试选择，如 function hasSelection() { var selText = ""; if (document.selection) { // IE selText = document.selection.cr

我可以在客户端使用JavaScript创建类似Internet Explorer加速器的东西吗

我希望当用户在页面上选择一些文本时，会显示一个可单击的图标

我应该等待的事件是什么？

最好的方法可能是在页面上设置一个mouseup侦听器，该侦听器调用一个函数来测试选择，如

function hasSelection() {
  var selText = "";
  if (document.selection) { // IE
    selText = document.selection.createRange().text;
  } else () { // Standards-based browsers
    selText = document.getSelection();
  }
  // This simple example does not include legacy browsers like Netscape 4, etc.
  if (selText !== "") {
    return true
  }
  return false;
}

您可以更改此选项以返回选择并以其他方式对其进行操作。但是这里返回的布尔值可以确定按钮是否显示

对IE使用attachEvent，对Firefox等使用addEventListener，并监听mouseup事件。

本质上，想法是处理

文档。在mouseup

事件时，适当地显示隐藏的“加速器”

div

，并检索所选文本

我想以下示例将是您的良好起点：

<html>
<head>
    <script>
        function getSelectedText() {
            var selection = '';
            if (window.getSelection) selection = window.getSelection().toString();      
            else if (document.getSelection) selection = document.getSelection();                
            else if (document.selection) selection = document.selection.createRange().text;
            return selection;
        }

        function showAccelerator(x, y){
            var text = getSelectedText();
            if (text !== ''){
                accelerator.style.display = '';
                accelerator.style.left = x;
                accelerator.style.top = y;
                timeout_id = setTimeout(hideAccelerator, 1000);
            } else {
                hideAccelerator()
            }
        }

        function hideAccelerator(){
            clearTimeout(timeout_id);
            accelerator.style.display='none';
        }

        function isAcceleratorHidden(){
            return accelerator.style.display === 'none';
        }

        function onMouseUp(evt){
            if (isAcceleratorHidden()){
                var event2 = (document.all) ? window.event : evt;
                showAccelerator(event2.clientX, event2.clientY);
            }
        }

        function alertSelection(){
            alert(getSelectedText());
        }

        document.onmouseup = onMouseUp;
    </script>
</head>
<body>
    <div id="accelerator" style="position: absolute; width: 100px; left: 0px; top: -50px; display: none; border: solid; background-color : #ccc;">
        accelerator div<input type="button" value="alert" onclick="alertSelection();" />
    </div>
    <p>
        sometext<br/><br/><br/>
        even more text
    </p>
</body>
</html>


函数getSelectedText（）{
var选择=“”；
如果（window.getSelection）selection=window.getSelection（）.toString（）；
如果（document.getSelection）selection=document.getSelection（），则为else；
如果（document.selection）selection=document.selection.createRange（）.text，则为else；
返回选择；
}
功能显示加速器（x，y）{
var text=getSelectedText（）；
如果（文本！=''）{
accelerator.style.display=''；
加速器.style.left=x；
accelerator.style.top=y；
timeout_id=setTimeout（hideAccelerator，1000）；
}否则{
hideAccelerator（）
}
}
函数hideAccelerator（）{
clearTimeout（超时\u id）；
accelerator.style.display='none'；
}
函数isAcceleratorHidden（）{
return accelerator.style.display==='none'；
}
onMouseUp（evt）功能{
如果（isAcceleratorHidden（））{
var event2=（document.all）？window.event:evt；
showAccelerator（event2.clientX，event2.clientY）；
}
}
函数alertSelection（）{
警报（getSelectedText（））；
}
document.onmouseup=onmouseup；
加速器室

sometext



更多文本