Question

我有一个以文本开头的textarea我不希望用户能够改变，并且通过以下方式阻止这样做：

左键和退格键一直有效，直到到达不可删除文本的位置。
up键具有特殊功能，不提供导航功能（返回false）。
- （使用前两条规则，用户无法通过箭头键将插入符号放在此区域中）
当用户点击元素时，插入符号位于textarea的末尾（鼠标按下）。
主页和 ctrl + a 也已被处理。

为了便于说明，它看起来像

Don't Delete Anything Before the Colon:  Your text here.  The user text will also
wrap like this.

据我所知，我遇到的每一种情况只有一种：拖放。我知道如何完全禁用拖放，但这不是我想要的。我只是不希望能够改变'不可删除的文本'。我可以在允许掉落之前放置插入符号。或者，我可以阻止掉落但访问掉落事件并将其放在我喜欢的地方吗？

Answer 1

我制定了一个解决方案。这取决于jQuery，但熟练的JS程序员可以轻松地删除我确定的依赖。

现场演示：http://trafnar.github.com/permastring/

JS代码：https://github.com/trafnar/permastring/blob/master/permastring.js

Github Repo：https://github.com/trafnar/permastring

它的工作原理是不断存储文本字段的值，然后基本上“撤消”任何改变永久字符串的更改。

到目前为止我注意到的最大缺点是它破坏了用户选择全部+删除的能力。编辑：我已经修复了这个缺点，现在可以选择全部并删除。

Answer 2

我明白了，这是要点：

为避免混淆，我首先“隐藏”插入符OnDragOver和OnDragEnter。

function(event){
  event.preventDefault ? event.preventDefault() : event.returnValue = false;
}

然后我阻止了OnDrop，但将数据放在我想要的地方。

function(event){
  element.value += event.dataTransfer.getData("Text");
  event.preventDefault ? event.preventDefault() : event.returnValue = false;
}

控制拖放位置

2 个答案: