javascript 更改 textarea 中特定部分的 textcolor

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11015074/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 11:49:37  来源:igfitidea点击:

Change textcolor of specific parts in textarea

javascriptjqueryhtmlcss

提问by snix

Is there any possibility to change the text-color of some parts in a textarea in HTML?

是否有可能更改 HTML 文本区域中某些部分的文本颜色?

I like to output some highlighted PHP-Code on my website and give the possibility to select the complete code by one click on this textarea. I've already wrote a javascript function to select the complete text. But if I try to put spans around the text, they are printed, too.

我喜欢在我的网站上输出一些突出显示的 PHP 代码,并可以通过单击此文本区域来选择完整的代码。我已经写了一个 javascript 函数来选择完整的文本。但是如果我尝试在文本周围放置跨度,它们也会被打印出来。

Maybe it should work with a div, if there is a way to select the text in a div by one click.

也许它应该与 div 一起使用,如果有办法通过单击选择 div 中的文本。

采纳答案by gdoron is supporting Monica

No, it's impossible, but you can have some css to make a div to look like it's a <textarea>and inside the div you can put several <span>s with colors.

不,这是不可能的,但是您可以使用一些 css 使 div 看起来像 a<textarea>并且在 div 内您可以放置​​几个<span>带有颜色的 s。

You can also use something like this

你也可以使用这样的东西

回答by Hyman Brown

  • Editing: I can recommend the Jquery Editableplugin. Also try this plugin. Not only does it perform in place editing but also selects the inner text for you.
  • Copying: zClipdoes a great job of copying to clipboard.
  • Highlighting: You can look into the snippetJquery plugin to highlight language syntax
  • 编辑:我可以推荐 Jquery Editable插件。也试试这个插件。它不仅可以执行就地编辑,还可以为您选择内部文本。
  • 复制zClip在复制到剪贴板方面做得很好。
  • 突出显示:您可以查看片段Jquery 插件以突出显示语言语法

So, you would display properly 'colored' code;when the user clicks on the div with the code, it changes to an editable textarea and if the user clicks on the icon besides the textarea, the code is copied to the clipboard.

因此,您将正确显示“彩色”代码;当用户单击带有代码的 div 时,它会更改为可编辑的 textarea,如果用户单击 textarea 之外的图标,则代码将复制到剪贴板。

回答by Matthew Riches

There are many scripts out there that do just this, here's a nice list

有很多脚本可以做到这一点,这里有一个不错的列表

9 Useful Javascript Syntax Highlighting Scripts

9 个有用的 Javascript 语法高亮脚本

Most of these have the functionality you require, so you don't need to reinvent the wheel - unless you really want to :-)

其中大多数都具有您需要的功能,因此您无需重新发明轮子 - 除非您真的想要:-)