javascript - `onselectionchange` 的 HTML5 事件

Question

是否有对应于 IE 旧版onselectionchange的标准跨浏览器 HTML5 事件（因此在当前选择更改时会触发它）？

已编辑，我正在寻找跟踪选择对象的变化。

Answer 1

利用onchange

我建议使用 jQuery 来避免这些跨浏览器问题，但这并不意味着您应该跳过测试。看这里。

看看兰吉 window.getSelection = rangy.getSelection

它可能会工作......

/* 
IE 8 getSelection() missing object and properties simple hack
*/
if (window.getSelection == undefined) {                /* IE? */
    var wgS = setInterval(function(){                  /* wait for Rangy */
        if (rangy.initialized) {
            window.getSelection = rangy.getSelection;  /* do the stuff */
            clearTimeout(wgS);                         /* exit */
        }
     }, 10);
}

来源：网络

Answer 2

您可以在 keyup 事件处理程序上找到光标位置。例如。

function getCursorPos(evt){
  	if(window.getSelection){
		var sel=document.getSelection();
		if(sel.rangeCount==0){return;}
		var range = sel.getRangeAt(0);
		var p=range.startOffset;
	}else{
		var sel=document.selection;
		if(sel){
		var range=sel.createRange();
		var p=range.offsetLeft;}
	}

  document.getElementById('myoutposition').innerHTML=p;
  
  }

if(addEventListener){
  document.getElementById('myeditbox').addEventlistener('keyup',getCursorPos,false);
  }
else{
  document.getElementById('myeditbox').attachEvent('onkeyup',getCursorPos);}

<textarea id="myeditbox" style="width:100%;height:100px;"></textarea><br/>
the current cursor position is&nbsp;<output id="myoutposition">0</output>

Answer 3

永远都不迟 ：

// IE
myEditableElement.onselectionchange = onSelectionChange;
// work on chrome, untested on firefox
myEditableElement.addEventListener('focus', function (event) {
  document.addEventListener('selectionchange', onSelectionChange);
});
myEditableElement.addEventListener('focusout', function (event) {
  document.removeEventListener('selectionchange', onSelectionChange);
});

// Event
function onSelectionChange (event) {
  // todo
}

Answer 4

标准是onchange：

<select id="myName" onchange="myMethod(this)">
...
</select>

这也可以用于文本框等。

请参阅http://www.w3schools.com/tags/ev_onchange.asp。

Answer 5

您可能想查看 onChange 属性。

<input type='text' onChange='alert(this.value)'>

onchange 事件在元素的值已更改时发生。

对于单选按钮和复选框，onchange 事件在选中状态发生更改时发生。