Fatal编程技术网
  • javascript/
  • Javascript 可编辑div：在标记内设置文本光标

Javascript 可编辑div：在标记内设置文本光标

javascript tags

Javascript 可编辑div：在标记内设置文本光标,javascript,tags,contenteditable,Javascript,Tags,Contenteditable,我有一个可编辑的div。该div的内容如下所示： This is a <ins>new</ins> chapter. This is a <ins>new</ins> and very interesting chapter. 这是一个新的篇章。 （标记不可见，它们用于设置样式） 如果将文本光标设置在“new”前面，则一切正常。但如果将文本光标设置在“new”后面，则光标位于-标记内，并且新键入的文本也位于标记内： This is a <

我有一个可编辑的div。该div的内容如下所示：

This is a <ins>new</ins> chapter.

This is a <ins>new</ins> and very interesting chapter.

这是一个新的篇章。
（标记不可见，它们用于设置样式） 如果将文本光标设置在“new”前面，则一切正常。但如果将文本光标设置在“new”后面，则光标位于-标记内，并且新键入的文本也位于标记内：

This is a <ins>new and very interesting</ins> chapter.

这是一个非常有趣的新章节。
但它应该是这样的：

This is a <ins>new</ins> chapter.

This is a <ins>new</ins> and very interesting chapter.

这是一个非常有趣的新章节。
如何设置标记后面的文本光标并防止新文本写入标记？

确定。第一个想法是制作

<ins contenteditable="false">new</ins>

新建
在contenteditable=“true”元素中。进一步阅读（）会发现这在IE中并不总是解释得很好。在这篇文章中有一个简单的答案（），但我真的不同意。这只是一个错误，可能会在下一版本的浏览器中修复

接下来，我跟随这个链接（）并且我没有；我没有得到好消息。没有办法阻止ins标记编辑如此简单的内容。首先，请注意：

如果这不是一项附加功能，则必须确保其正常工作。在编写时，不允许用户在-tag内写入，因此所有选项：

  • 在几乎所有浏览器中工作
  • 与一个小虫子一起工作
  • 正在工作，但是如果有人
必须拒绝。因此，如果有人关闭javascript，它也应该可以工作。在这种情况下，我得出了第一个结论（一如既往）：必须进行服务器端验证。 这将防止用户破坏您的数据库和做他不能做的事情

在服务器端验证（当然，如果出现问题，则显示通知）之后，它将成为附加功能。因此，我们现在应该尽我们所能，让它发挥作用（但现在没有义务）

精彩的演讲：）

**解决方案**

我建议像。。。我知道这听起来有点像旧时代的milion标签，但实际上这会起作用，而且会很棒。 在ins元素之间添加一个span元素（例如，使用php:

$text = '<span contenteditable="true">'.$text.'</span>';
str_replace('<ins>', '</span><ins>', $text);
str_replace('</ins>', '</ins><span contenteditable="true">', $text);

$text='.$text'；
str_替换（“”，，$text）；
str_替换（“”，，$text）；
使此跨度可编辑，并且仅此跨度可编辑（而非块容器）。仅此而已。解决方案简单、干净、效率更高，几乎100%安全。而且很好

使用javascript黑客时的额外安全性

如果您需要完全使用javascript（可能有人知道怎么做？），为了总体安全，我建议另外这样做：

  • 向主块可编辑容器中的每个不可编辑元素添加数据noneditable id=“id”。现在每个不可编辑元素都有自己的唯一id（可以使用jQuery完成，例如使用选择器$（“div#editable ins”））
  • 运行一个javascript，该javascript将运行所有具有属性“data noneditable id”的对象，并将它们的内部HTML保存在数组中（例如：1=>'new'，2=>'added'，3=>'inserted'，…）
  • 现在，如果有人编辑其中任何一个，您可以轻松修复它们
    • 另外，这也应该有点帮助…（）

    希望有帮助！祝你好运。

    这是一个可用性问题。另一方面，如果有人试图在“new”之后写东西，但在“new”之后，他必须在这里写：ne…w，删除last w，并在“ne”之后写回.所以我认为这没关系。我会考虑它有多普遍。你能写下这个“黑客”的应用程序吗？不，这不是一个可用性问题。用户不允许在-标记内书写。文本框与一个检查新词和删除词的算法相连接。但这里的问题是防止文本光标被删除ting设置在标签内。有趣的问题+1。下面是我的一点帮助。希望它有帮助，如果你有任何问题，请随时写信。祝你好运。