使用 Javascript 在 TEXTAREA 中隐式折叠

发布于 2024-09-07 15:29:38 字数 402 浏览 3 评论 0原文

我希望能够使用 Javascript/jQuery 在 xhtml textarea 中创建一种折叠类型。例如，给定以下文本：

ABC [123] DEF

当光标不在其上方时，我希望将 [123] 减少为 [] - 即对于光标 |：

ABC [] DEF|
AB|C [] DEF
ABC [|123] DEF
ABC [12|3] DEF

当然，当项目折叠时（即当光标退出大括号时），我希望保留大括号内的内容，并在折叠时恢复大括号内的内容（光标进入大括号）。

我非常感谢对此的想法。

谢谢。

布莱恩

原文

I'd like to be able to create a type of folding in xhtml textareas using Javascript/jQuery. For example, given the following text:

ABC [123] DEF

I'd like to have [123] reduce to [] when the cursor is not over it - i.e. for a cursor |:

ABC [] DEF|
AB|C [] DEF
ABC [|123] DEF
ABC [12|3] DEF

I want the content within the braces to be preserved, of course, when the item is folded in (ie when cursor exits the braces), and restored when it's folded out (cursor enters the braces).

I'd be very much obliged for thoughts on this.

Thank you.

Brian

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

悟红尘 2024-09-14 15:29:38

您可能想查看一些用 JavaScript 实现的富文本编辑器。如果您将折叠视为内联样式之类的东西（ css display:none; }，我确信您可以在其语法突出显示中添加一条规则，以使折叠无需太多努力即可工作。

10 jQuery 和非 jQuery RTE

您还可以查看 Mozilla 的 bespin 项目 (http://mozillalabs.com/bespin/)。无法发布更多链接，这对 SO 来说没什么新鲜感。

回复收藏 0 原文

—━☆沉默づ 2024-09-14 15:29:38

$(function(){
  //Format on load
  $(".folding").html('[]');

  //Wire up load
  $(".folding").mouseover(function(){
    $(this).html('[' + $(this).attr("original") + ']');
  }).mouseout(function(){
    $(this).html('[]');
  });                   
});


<BODY>ABC <span class="folding" original='123'>[123]</span> DEF</BODY>

这应该对你有用。不是最雄辩的，但达到了预期的结果。

$(function(){
  //Format on load
  $(".folding").html('[]');

  //Wire up load
  $(".folding").mouseover(function(){
    $(this).html('[' + $(this).attr("original") + ']');
  }).mouseout(function(){
    $(this).html('[]');
  });                   
});


<BODY>ABC <span class="folding" original='123'>[123]</span> DEF</BODY>

This should work for you. Not the most eloquent but delivers desired results.

回复收藏 0 原文

~没有更多了~