如何使用 javascript/jquery 设置用户输入的样式

Posted 2023-02-24

【中文标题】如何使用 javascript/jquery 设置用户输入的样式

【英文标题】：How to live-style an user input using javascript/jquery

【发布时间】：2012-02-16 17:49:30

【问题描述】：

我正在寻找在 javascript/jquery 中制作实时样式器的库或建议。这个想法是我的用户有一个 html 文本输入，我需要实时检测一些模式并对其应用样式，例如用户在 # 之后写 #some_text 应该被视为必须是一个标签像 #some_text 这样的粗体。

我是 javascript 的新手，所以我不知道从哪里开始，我做了一些研究，但我没有找到任何已经制作的库。感谢您的帮助和建议！

【问题讨论】：

你的例子不是很清楚。你能告诉我们一些在 sn-ps 之前/之后的内容吗？

【参考方案1】：

jQuery Tagit 之类的呢？

你可以这样初始化它：

<script>
        $(function() 
            var availableTags = [
                "#some_text1",
                "#some_text2",
                "#some_text3"
            ];

            $('#tags').tagit(tagSource: availableTags);
        );
</script>

<ul id="tags"></ul>

【参考方案2】：

类似的东西就在这里，在这个网站上使用。每当您在编辑器中编写问题或答案时，您都会在下面的区域中获得实时更新。当您应用格式时，它会在预览区域中实时更新。

这使用称为Markdown 的标准标记语法。这样做的好处是有很多工具支持 Markdown，因此您可以找到 jQuery 甚至离线编辑器（Windows 和 Mac）的集成。

Check this question and its answers 对于一些这样做的编辑。

还可以查看the stand-alone version of the Stack Overflow editor。

【参考方案3】：

也许这有助于您了解您必须做什么：http://jsfiddle.net/EeGxs/3/ 我所做的只是将事件侦听器添加到“keydown”，这意味着按下了一个键，然后您只需查看该行中是否有一个“#”以及是否将其添加到 p -tag 中是粗体。 它只是一个演示。