Question

这就是我尝试做的事情，我知道这需要花费很多时间才能获得美观的用户界面。

$("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 air mode 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编辑器添加/启用到DOM ....我现在看到它如何实现它，如果我需要自己编写代码。。+更好的用户界面比选择下拉列表+小时的调试...它就像一个小版本的TinyMCE或CLEditor，适用于单个HTML元素而不是整个HTML文本区域。

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

Answer 1

您需要添加function() {}

$("input[type=text],textarea").click(function(){
   $(this).removeClass("your_old_class").addClass("your_new_class")
});

Answer 2

为什么不呢：

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

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

希望有所帮助。

修改

在更好地理解你需要的东西后，想想这样的事情。

创建一个不可见的浮动（绝对定位）面板 - 它将是“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上创建一次并操纵它的位置和放大器可视性。

希望它更好： - ）

Answer 3

无需在文本框上绑定焦点事件，它本身就有焦点，焦点和焦点事件。所以你可以简单地使用.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>");
});

使用javascript / jquery更改元素焦点（单击）上的input / textarea样式表

3 个答案: