本文介绍了Div可编辑和更多...更多的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

那么,我需要用同一个单词替换一个单词,在div contentEdible属性中,但格式化为...
像这样:

< div>我的球很大< / div>


对此(替换单词:球):

< DIV>我的< font style =color:blue;>球< / font>在contentEditable中,这种情况发生在dinamically,而用户输入的文字是

替换发生。我认为onkeydown,onkeyup或onkey的简单事件可以解决这个问题。
但是,问题在于我的口号,毕竟,我尝试过,它留在替换之前,什么时候应该留下。我尝试编写一些js代码,尝试找到一些jquery脚本,但是在这种情况下他们都失败了......


任何人都有一些想法或技巧吗? >

我认为:
- >记录未格式化单词的长度。
- >删除此单词
- >将新单词格式化。
- >与脱字符一起走,根据此格式化的字长定位。
- >是吗?
PS:我必须考虑这个div的任何地方的一个词。



我不知道如何编写这个代码, 。

如果我错了,请纠正我。



既然如此,谢谢!



编辑[1]:我希望这可以在 Mozilla Firefox 上使用,具体而言;

解决方案

我在这台机器上只有IE6 / 7,但也许你可以将这个概念应用于其他浏览器版本的Ranges(或者这可能是跨浏览器?)。

基本上我们存储光标位置,进行搜索/替换,然后将光标放回原来的位置:

html:

 < div id =contentcontentEditable =trueonkeyup =highlight(this)>这是一些需要输入的区域。 < / DIV> 

和脚本:

  function highlight(elem){
//存储光标位置
var cursorPos = document.selection.createRange()。duplicate();
var clickx = cursorPos.getBoundingClientRect()。left;
var clicky = cursorPos.getBoundingClientRect()。top;
//复制div
的内容var content = elem.innerHTML;
var replaceStart ='< font style =color:blue>';
var replaceEnd ='< / font>';
//只有替换/移动光标,如果匹配
//注意空格带 - 这可以防止重复
if(content.match(/ test /)){
elem.innerHTML = content.replace(/ test / g,''+ replaceStart +'test'+ replaceEnd +'');
//重置游标和焦点
cursorPos = document.body.createTextRange();
cursorPos.moveToPoint(clickx,clicky);
cursorPos.select();
}
}


Well,

I need to replace a word, in a div contentEdible property on, by the same word but formatted...
Like this:
<div> My balls are big </div>

To this (replace the word: balls):
<div> My <font style="color:blue;">balls</font> are big </div>

In a contentEditable this happens dinamically, while the user type the text the replacements happens. I think that a simple event onkeydown, onkeyup, or onkey press, can solve this part.But, the trouble is with the caret, that after all that i tryed, it stay before the word replaced, when should be stay after. I tryed write some js code, tryed find some jquery scripts, but all them failed in this situation...

Any one has some ideia, or trick ?

I think:--> Record the length of the word unformatted.--> Delete this word--> Put new word formatted.--> Walk with the caret, to position based this formatted word length.--> Is it?PS: I have to considerate a word in any place of this div.

I don't know how to write this code that do what i say above.

Correct me, if i'm wrong.

Since yet, thanks!

Edit[1]: I want that this works on Mozilla Firefox, specificlly;

解决方案

I only have IE6/7 on this machine, but maybe you can apply the concept to other browser versions of Ranges (or maybe this is cross-browser?).

Basically we store the cursor position, make our search/replacement, then put the cursor back where it was:

html:

<div id="content" contentEditable="true" onkeyup="highlight(this)">This is some area to type.</div>

and the script:

function highlight(elem) {
// store cursor position
var cursorPos=document.selection.createRange().duplicate();
var clickx = cursorPos.getBoundingClientRect().left;
var clicky = cursorPos.getBoundingClientRect().top;
// copy contents of div
var content = elem.innerHTML;
var replaceStart = '<font style="color:blue">';
var replaceEnd = '</font>';
// only replace/move cursor if any matches
// note the spacebands - this prevents duplicates
if(content.match(/ test /)) {
    elem.innerHTML = content.replace(/ test /g,' '+replaceStart+'test'+replaceEnd+' ');
    // reset cursor and focus
    cursorPos = document.body.createTextRange();
    cursorPos.moveToPoint(clickx, clicky);
    cursorPos.select();
    }
}

这篇关于Div可编辑和更多...更多的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-30 06:19