我如何创建一个html输入文本区域，以便我可以强调或格式化某些单词？ [英] How can I create an html input text area such that I can underline or format certain words?

问题描述

我想要一个输入字段，可以让javascript为输入字段的不同部分设置某些属性。
一个简单的例子来说明我想要做什么：比方说，我想在输入文本区域中划下所有的骂人词。所以当插入一个新的字母时，javascript会检查输入文本区域，并且对于与我认可的骂人词组相匹配的任何词，它会强调这个词。请注意，我不希望用户/客户端能够设置文本的任何属性，我只是希望JavaScript能够对某些词进行不同的格式化（所以没有工具栏或类似的东西）。我还希望盒子在其他方面看起来完全像常规文本区域。

我已经知道一些丰富的文本编辑器（如juju editor和lwrte）以及一些语法荧光笔，但我不确定他们是否按照我想要的。

那么，有谁知道一个能让我这样做的工具？

谢谢

解决方案

您可以使divcontenteditable在div上将该属性设置为true。然后用标记来包围那些不会影响布局的文字，但是可以将其设置为样式并在以后轻松移除。

类似这样：

 < style type =text / css> 
 .content {
 border：5px inset＃000; 
 padding：5px; 
} 
 
 .content .curse {
 color：＃f00; 
 font-weight：bold; 
 text-decoration：下划线; 
} 
< / style> 
< div contentEditable =trueclass =content> 
 Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Aenean consequat gravida tempus。 Vivamus convallis，purus dictum bibendum ullamcorper，neque ipsum aliquam ligula，坐amet imperdiet est an an non nisl。 Mauris dignissim libero et urna iaculis at iaculis metus semper。 Sed acis nisl eu arcu molestie pretium quis quis ligula。 Cras vitae enim vitae lacus molestie dictum。 Donec rutrum tincidunt augue，vel pretium lectus faucibus ut。在接下来的步骤中，我们将会发现它们正在发生变化。 Curabitur sagittis，吃了viverra fringilla，orci urna feugiat urna，eu ultricies lacus odio adipiscing risus。 Sed pellentesque blandit ipsum vel hendrerit。 Nulla nibh mauris，egestas sed consectetur et，lobortis in dolor。 Curabitur eu ante lectus。 Cras consequat，duer sed pellentesque tempor，purus turpis egestas sapien，在fermentum eros tortor vel mi。 Integer accumsan，augue id elementum pretium，est quam vehicula nisl，at congue purus sem quis ipsum。 Aliquam商品，在euismod lacinia埃拉特，tortor lectus interdum lacus，quis vestibulum augue nulla in tellus。 
< / div> 
< script type =text / javascript> 
 $（document）.ready（function（）{
 var html = $（'。content'）。html（）; 
 $（'。content'）。html（html。替换（/ lectus / gi，'< span class =curse> lectus< / span>））; 
}）; 
< / script> 
  

I'd like an input field that I can have javascript set certain attributes for, for different parts of the input field. A simple example to demonstrate what I'd like to do: let's say I want to underline all curse words in an input text area. So the javascript would check the input text area when a new letter is inserted, and for any words matching my array of recognized curse words, it would underline the word. Note, I do not want the user/client to be able to set any attributes of the text, I simply want the javascript to be able to format certain words differently than others (so, no toolbars or anything like that). I also want the box to look exactly like a regular text area in every other regard.

I'm already aware of some rich text editors (like juju editor and lwrte) as well as some syntax highlighters but I'm not sure if they do what I want.

So, anyone know of a tool that would let me do this?

Thanks

解决方案

You can make a div "contenteditable" by setting that attribute to true on the div. Then surround the words in question with markup that doesn't affect layout, but that can be styled and easily removed later.

Something like this:

<style type="text/css">
  .content {
    border: 5px inset #000;
    padding: 5px;
  }

  .content .curse {
    color: #f00;
    font-weight: bold;
    text-decoration: underline;
  }
</style>
<div contentEditable="true" class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consequat gravida tempus. Vivamus convallis, purus dictum bibendum ullamcorper, neque ipsum aliquam ligula, sit amet imperdiet est ante non nisl. Mauris dignissim libero et urna iaculis at iaculis metus semper. Sed ac nisl eu arcu molestie pretium quis quis ligula. Cras vitae enim vitae lacus molestie dictum. Donec rutrum tincidunt augue, vel pretium lectus faucibus ut. In consequat diam accumsan urna fermentum vitae tincidunt ipsum rutrum. Curabitur sagittis, ante a viverra fringilla, orci urna feugiat urna, eu ultricies lacus odio adipiscing risus. Sed pellentesque blandit ipsum vel hendrerit. Nulla nibh mauris, egestas sed consectetur et, lobortis in dolor. Curabitur eu ante lectus. Cras consequat, dui sed pellentesque tempor, purus turpis egestas sapien, in fermentum eros tortor vel mi. Integer accumsan, augue id elementum pretium, est quam vehicula nisl, at congue purus sem quis ipsum. Aliquam commodo, erat in euismod lacinia, tortor lectus interdum lacus, quis vestibulum augue nulla in tellus.
</div>
<script type="text/javascript">
  $(document).ready(function() {
    var html = $('.content').html();
    $('.content').html(html.replace(/lectus/gi, '<span class="curse">lectus</span>'));
  });
</script>

这篇关于我如何创建一个html输入文本区域，以便我可以强调或格式化某些单词？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！