使用 javascript / jquery 在元素焦点（单击）上更改输入/文本区域样式表

Question

这是我尝试做的，我知道这需要很多小时才能获得漂亮的 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。

我只是想知道是否有任何插件/sn-p 可以立即使用..

Answer 1

为什么不只是：

$(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 2

不需要在文本框上绑定焦点事件，它本身已经附加了焦点、焦点和焦点事件。所以你可以简单地使用 .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>");
});

Answer 3

您需要添加function() {}

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