代码之家 › 专栏 › 技术社区 › Val

jquery附加文本不可见

append jquery javascript

Val · 技术社区 · 15 年前

我试图在文本区域上方创建几个按钮来插入一些HTML代码——一个非常差劲的人的HTML编辑器。我有几个输入元素,我使用jquery设置一个单击处理程序,它将调用的jquery append() 或 html() 或 text() 功能。

处理程序激发,它显示一个debug alert(),但我尝试附加的文本不会显示在文本区域中。当我在Firebug中检查文本区域时,我看到作为文本区域的子级附加的文本——但是它变暗了,就像当一个元素的样式设置为显示时:无。但是Firebug的CSS检查器不显示对显示或可见性属性的任何更改。

当我将Click处理程序设置为“append()”,然后单击多次时,在Firebug中,我看到一次又一次地添加文本——但每个新块仍然不可见。如果我在Firebug中选择“编辑HTML”,然后在附加的文本旁边键入一些字符,整个文本块——jquery添加的文本和我在Firebug中添加的内容——会突然出现。

如果我不使用click处理程序,而是使用类似于 onclick="javascript:insert('bold');"

有人知道为什么不显示附加文本吗?

相关代码如下:

HTML:

<input type='button' id='bold' value='B' onclick='javascript:insert("bold")' />

<textarea name='PersonalGreeting' id='PersonalGreeting'>default text</textarea>

JavaScript:

function insert( cmd )  {
    switch ( cmd )  {
        case 'bold':
            $('#PersonalGreeting').append('<b>bold text here</b>');
            break;  
    }
}

5 回复 | 直到 15 年前

SLaks 15 年前

我想jquery正在尝试将html dom元素附加到 textarea .

尝试使用 val 获取和设置 特克斯塔利亚 的值,如下所示:

$('#PersonalGreeting').val($('#PersonalGreeting').val() + '<b>bold text here</b>');

VoteyDisciple 15 年前

基本问题是不能将HTML放在 <textarea> . 实际上,您根本不能将HTML元素附加到一个元素上。你可以用 .val() 方法更改内部显示的文本,但这不会使其变为粗体。就这样吧 <b> 显示为文本的一部分。

一个现成的WYSIWYG编辑器 TinyMCE 是免费的,易于实施。而不是重新发明轮子许多比看起来更难),试试现有的轮子。

Justin Johnson 15 年前

slaks和voteydiscipline是正确的。您使用append是错误的,因为您将其视为字符串函数。

从 http://docs.jquery.com/Manipulation/append

将内容追加到匹配的元素。这次行动是插入元素的最佳方法,位于所有匹配元素的结尾。它类似于对所有指定元素,添加在文档中。

在这辆车上重新设计车轮可能比它的价值更让人头疼,除非这是为了创造一个更优秀、更具竞争力的产品或是为了你自己的实验。

另外,我也会避免使用突兀的javascript,正如您在示例中所展示的那样 onclick='javascript:insert("bold")' 嵌入在 input 元素。相反,您将得到一个更优雅的解决方案,如下所示:

HTML

<input type="button" value="B" class="editor-command" >
<input type="button" value="I" class="editor-command" >
<input type="button" value="U" class="editor-command" >

JavaScript (未测试)

$(document).ready(function() {
  var textarea = $('#PersonalGreeting')
  $(".editor-command").each(function(i, node) {
    textarea.val(textarea.val() + '<$>text here</$>'.replace(/\$/g, node.value);
  });
});

wookiehangover 15 年前

如果主要问题是文本区域不可见,我将尝试以下操作:

$('#PersonalGreeting').append('<b>bold text here</b>').show();

可能值得一试。

编辑:为了不尝试重新发明轮子,我已经成功了 WYMEditor

jeef3 15 年前

你可以这样做:

 $('#PersonalGreeting').append('[b]bold text here[/b]');

但这并不能使文本变为粗体。老实说,我不知道如何在文本区域中将文本显示为粗体,我想象了一些JS技巧。