具有contenteditable的onChange事件 [英] onChange event with contenteditable

问题描述

代码如下：

  ... text< span contenteditable =trueonChange =someFunction（）> ;等等等等< / span> text ... 
  

onChange事件不起作用。 （至少在FireFox中）

我不想使用textarea /输入标签，因为必须有可用于更改文本中的特定单词，并且必须以内联方式显示（不是块）。 p>

有没有办法如何做到这一点？

解决方案

我写道：

这个函数的一次调用修复了页面中的所有ContentEditable元素。

  function fix_onChange_editable_elements（ ）
 {
 var tags = document.querySelectorAll（'[contenteditable = true] [onChange]'）; //（需要FF 3.1 +，Safari 3.1 +，IE8 +）
 for（var i = tags.length-1; i> = 0; i--）if（typeof（tags [i] .onblur）！='function'）
 {
 tags [i] .onfocus =函数（）
 {
 this.data_orig = this.innerHTML; 
}; 
 tags [i] .onblur = function（）
 {
 if（this.innerHTML！= this.data_orig）
 this.onchange（）; 
删除this.data_orig; 
}; 
} 
} 
  

Code like:

...text <span contenteditable="true" onChange="someFunction()">blah blah</span> text...

The onChange event doesn't work. (at least in FireFox)
I don't want to use textarea/input tags, because there must be available to change only particular words in text, and must be displayed inline (not block).

Is there any way how to do that ?

解决方案

The function that I wrote:
One call of this function fixes all ContentEditable elements in the page.

function fix_onChange_editable_elements()
{
  var tags = document.querySelectorAll('[contenteditable=true][onChange]');//(requires FF 3.1+, Safari 3.1+, IE8+)
  for (var i=tags.length-1; i>=0; i--) if (typeof(tags[i].onblur)!='function')
  {
    tags[i].onfocus = function()
    {
      this.data_orig=this.innerHTML;
    };
    tags[i].onblur = function()
    {
      if (this.innerHTML != this.data_orig)
        this.onchange();
      delete this.data_orig;
    };
  }
}

这篇关于具有contenteditable的onChange事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！