使用Javascript创建自己的HTML文本字段_Javascript_Html_Textfield

使用Javascript创建自己的HTML文本字段

javascript html

使用Javascript创建自己的HTML文本字段,javascript,html,textfield,Javascript,Html,Textfield,我遇到了以下内容，想知道是否有人有一个如何实现这一点的基本教程（或者我应该使用什么关键搜索词）这只是一个经过大量修改的文本字段，还是他们设法从头创建了一个全新的文本字段我用谷歌搜索了很多次，我总是能找到一些页面，这些页面都与使用CSS等定制内置文本字段有关。它不是一个文本框。它是一个DIV，它使用javascript注入了大量HTML 基本思想是JavaScript使用div的innerHtml属性并将HTML写入其中。这是一个替代输入的JavaScript实现。它基本上隐藏了输入，并使用它

我遇到了以下内容，想知道是否有人有一个如何实现这一点的基本教程（或者我应该使用什么关键搜索词）

这只是一个经过大量修改的文本字段，还是他们设法从头创建了一个全新的文本字段

我用谷歌搜索了很多次，我总是能找到一些页面，这些页面都与使用CSS等定制内置文本字段有关。

它不是一个文本框。它是一个

DIV

，它使用javascript注入了大量

HTML

基本思想是JavaScript使用div的

innerHtml

属性并将HTML写入其中。

这是一个替代输入的JavaScript实现。它基本上隐藏了输入，并使用它通过POST存储和传递数据。

我看到的高级文本字段都是

iframe

或

div

。它们背后的代码非常混乱，不易访问

小心行事

如果您想了解richtext web编辑器的工作原理，一个很好的起点是查看

contenteditable

属性和

document.execCommand

方法（最好的编辑器使用的远不止这些，但这些都是基础）。过于简化的编辑器由

contenteditable

块和对文本选择调用

document.execCommand

的方法组成

但是，作为一个已经开发出这类编辑器的人来说，你最好使用现有的编辑器（在我看来，CKEditor是一个很棒的编辑器）

编辑：请注意，

contenteditable

是一个专有的（Microsoft）属性，但大多数（所有？）浏览器现在已经实现了它，它将在HTML5中实现

编辑2：我想澄清一些误解

```
div
```
或
```
iframe
```
本身不可编辑，它需要
```
contenteditable
```
属性。使用
```
iframe
```
通常是一种解决办法，因为较旧的Gecko浏览器只支持只能应用于整个文档的可选可编辑属性（
```
designMode
```
）
虽然高级编辑器的某些操作可能使用
```
innerHtml
```
，但这并不是在web上制作编辑器的关键

你可能要考虑而不是所见即所得。

谢谢。这真的很有趣。我会花一些时间研究这个问题。虽然在这个阶段并不重要，但我很好奇他们是如何产生闪烁的光标的？@Thorn007，嗯。TinyMCE和CKEditor有一支相当强大的开发团队支持他们。@Smotchkiss，虽然是真的，但我同意当接近这些项目的代码库时，有一个巨大的学习曲线。一个简单的编辑器相对来说是无痛的，但是这些编辑器有大量的功能，除此之外，还可以解决大量的浏览器限制。这方面的代码一定会非常庞大。