-2

这就是我尝试做的事情，我知道这需要很多小时才能获得漂亮的 UI。

$("input[type=text],textarea").bind("focus", function()![enter image description here][1] {
   var $th = $(this).before("<div class='css-editor'><select class='font-family-select'> <option></option></select><select class='font-style-select'><option>italic</option></select><select class='font-size-select'></select></div>");

}).bind("blur", function() {
   $('.css-editor').remove();
});

上面的代码只是一个原型。Redactor 空气模式http://imperavi.com/redactor/examples/air/是我在网上能找到的最接近的东西。

我想知道目前是否有任何 jQuery 插件或 Javascript 可以做到这一点？

    <table style="width:100%" class="remark" cellspacing="0" cellpadding="0">
        <tr  class="invoice-cell-section">
        <th colspan="6" class="invoice-cell-top">
            **<input type="text" value="{_ Remark}"/>**
        </th>
        </tr>
        <tr>
        <td colspan="6" class="invoice-footer invoice-cell-bottom">
                **<textarea class="invoice-remark static"></textarea>**
        </td>
    </tr>
</table>

您在这里看到带有值 Remark 和空 Textarea 的输入框。我希望人们点击它时...有一个样式表编辑器仅编辑该 textarea/input 元素...

对于刚刚阅读此问题的任何人.. 我知道有几种方法可以将此 .css-editor 添加/启用到 DOM.. 我现在明白了如果我需要自己编写代码如何实现它.. + 更好UI 比选择下拉菜单 + 数小时的调试...它就像 TinyMCE 或 CLEditor 的小型版本，适用于单个 HTML 元素，而不是 textarea 中的整个 HTML。

我只是想知道是否有任何我可以立即使用的插件/片段..

4

3 回答 3

0

您需要添加function() {}

$("input[type=text],textarea").click(function(){
   $(this).removeClass("your_old_class").addClass("your_new_class")
});
于 2013-10-14T10:38:08.757 回答
0

为什么不只是：

$(document).on('focus', 'input[type=text],textarea', function(){
    $(this).addClass('focused');
});
$(document).on('blur', 'input[type=text],textarea', function(){
    $(this).removeClass('focused');
});

定义一个名为的css类focused并在那里应用样式。

希望有帮助。

编辑：

在更好地了解您的需求之后，请考虑这样的事情。

创建一个不可见的浮动（绝对定位）面板——它将是“css 编辑器”。

现在，在每个输入焦点上，了解它在文档上的位置，并相对显示不可见的浮动 css 编辑器。看看这个想法：

$(document).on('focus', 'input[type=text],textarea', function(){
    $('.css-editor').css({left: $(this).offset().left+'px', top: $(this).offset().top+'px'}).show();
});
$(document).on('blur', 'input[type=text],textarea', function(){
    $('.css-editor').hide();
});

请注意，无需删除并重新创建此隐藏元素。您可以在 DOM 上创建一次并操作它的位置和可见性。

希望它更好:-)

于 2013-10-14T10:39:28.447 回答
0

不需要在文本框上绑定焦点事件，它本身就附加了焦点、焦点和焦点事件。所以你可以简单地使用 .onfocus 或者你也可以使用 .live 函数。

直接使用 onfocus 处理程序：

$("input[type=text],textarea").focus(function() {
   var $th = $(this).before("<div class='css-editor'><select class='font-family-select'> <option></option></select><select class='font-style-select'><option>italic</option></select><select class='font-size-select'></select></div>");
});

使用实时事件处理程序：

$("input[type=text],textarea").live("focus",function() {
   var $th = $(this).before("<div class='css-editor'><select class='font-family-select'> <option></option></select><select class='font-style-select'><option>italic</option></select><select class='font-size-select'></select></div>");
});
于 2013-10-14T10:55:58.950 回答