Question

我想要一个输入字段，我可以为输入字段的不同部分设置javascript设置某些属性。一个简单的例子来演示我想要做的事情：假设我想在输入文本区域中强调所有诅咒词。因此，当插入新字母时，javascript将检查输入文本区域，并且对于与我的识别的诅咒字数组匹配的任何单词，它将为该单词加下划线。注意，我不希望用户/客户端能够设置文本的任何属性，我只是希望javascript能够以不同的方式格式化某些单词（因此，没有工具栏或类似的东西）。我还希望盒子在其他方面看起来与常规文本区域完全相同。

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

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

由于

Answer 1

您可以通过在div上将该属性设置为true来使div“contenteditable”。然后使用不影响布局的标记来包围相关单词，但可以设置样式并在以后轻松删除。

这样的事情：

<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输入文本区域，以便我可以为某些单词加下划线或格式化？

1 个答案: