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

Change input/textarea stylesheet on element focus (click) using javascript / jquery

本文关键字：输入 文本 区域 样式 jquery javascript 元素 使用 焦点 单击      更新时间：2023-09-26

这就是我尝试做的事情，我知道这需要很多小时才能获得好看的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();
});

上面的代码只是一个原型。编校器空气模式 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>

您在此处看到带有值"备注"和空文本区域的输入框。我希望人们点击它时。有一个样式表编辑器可以仅编辑该文本区域/输入元素...

对于任何只是阅读这个问题的人..我知道有几种方法可以将此.css编辑器添加/启用到 DOM.... 我现在看到如果我需要自己编码如何实现它..+ 比选择下拉列表更好的 UI + 数小时的调试... 它就像TinyMCE或CLEditor的一个小版本，适用于单个HTML元素，而不是文本区域中的整个HTML。

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

为什么不只是：

$(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上创建它一次，并操纵它的位置和可见性。

希望它更好：-）

无需在文本框上绑定焦点事件，它本身附加了焦点，焦点和焦点事件。因此，您可以简单地使用 .onfocus，也可以使用 .live 函数。

直接使用对焦处理程序： 

$("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>");
});
您需要

添加function() {} 

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