在引导程序中禁用输入。如何将其应用于不同的 TAG?

Posted

技术标签:

【中文标题】在引导程序中禁用输入。如何将其应用于不同的 TAG?【英文标题】:Disabled inputs in bootstrap. How to apply it to a different TAG? 【发布时间】:2012-10-20 09:43:45 【问题描述】:

通过在输入上使用disabled 属性可以防止用户输入并触发稍微不同的外观。 这是演示http://jsfiddle.net/D2RLR/3023/

假设我想将相同的样式应用于不同的 TAG,例如表格。 其实我是用handsontable生成一个Excel-like data grid editor。 如何在以下上下文中应用disabled attribute(像表格一样标记)?

这里是使用handsontablebootstrap http://jsfiddle.net/D2RLR/3025/ 的演示

【问题讨论】:

除非插件有一些选项,否则你不能这样做,因为这些只是随着蓝色边框和所有东西移动的常规元素。最接近的方法是覆盖插件中的事件,或创建自己的插件。 @adeneo 感谢您的评论。无论如何,也许我不应该在表格上应用disabled attribute,而是在单击属于可操作数据网格的单元格时找到一种将其应用到输入表单的方法。知道怎么做吗? 【参考方案1】:

您不能应用 Bootstrap 现有的 input[disabled] 样式,但您可以添加完全模仿样式的新 CSS。

例如:

#exampleGrid td 
    cursor: not-allowed;
    background-color: #EEE;
    color: #9E9999;

显然这不包括您的只读逻辑和looks a little weird with your fiddle(因为列标题和行标题是相同的颜色),但这就是要点。

【讨论】:

【参考方案2】:

在这里查看:

http://handsontable.com/demo/conditional.html

.readOnly 单元格属性 - 使用它!

HTML 输入也有readonly 属性,而不仅仅是disabled 属性,它们的行为之间存在一些相当大的差异。

【讨论】:

+1 感谢您的回答。我已经知道readOnly cell property。无论如何,我的愿望是不同的。我想将样式 disabled inputs 应用于此单元格,就像在引导程序中一样。【参考方案3】:

Boostrap 仅根据其 disabled 属性设置输入样式,例如:

input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] 
    background-color: #EEEEEE;
    cursor: not-allowed;

因此您将无法使用引导程序来执行此操作,因为表没有这样的属性。

您应该使用各种插件或自行开发。

【讨论】:

【参考方案4】:

也许这可以帮助...更改单元格的外观,您可以对其进行编辑。

HTML

<table class="editableTable">
    <thead>
        <tr>
            <th>Code</th>
            <th>Name</th>
            <th>E-mail</th>
            <th>Telephone</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>001</td>
            <td>João Carlos</td>
            <td>joca@email.com</td>
            <td>(21) 9999-8888</td>
        </tr>
        <tr>
            <td>002</td>
            <td>Maria Silva</td>
            <td>mariasilva@mail.com</td>
            <td>(81) 8787-8686</td>
        </tr>
        <tr>
            <td>003</td>
            <td>José Pedro</td>
            <td>zepedro@meuemail.com</td>
            <td>(84) 3232-3232</td>
        </tr>
    </tbody>
</table>

CSS

* 
    font-family: Consolas;


.editableTable 
    border: solid 1px;
    width: 100%


.editableTable td 
    border: solid 1px;


.editableTable .editingCell 
    padding: 0;


.editableTable .editingCell input[type=text] 
    width: 100%;
    border: 0;
    background-color: rgb(255,253,210);

JS

$(function () 

    $("td").dblclick(function () 
        var originalContent = $(this).text();

        $(this).addClass("editingCell");
        $(this).html("<input type='text' value='" + originalContent + "' />");
        $(this).children().first().focus();

        $(this).children().first().keypress(function (e) 
            if (e.which == 13) 
                var newContent = $(this).val();
                $(this).parent().text(newContent);
                $(this).parent().removeClass("editingCell");
            
        );

        $(this).children().first().blur(function()
            $(this).parent().text(originalContent);
            $(this).parent().removeClass("editingCell");
        );
    );

);

【讨论】:

以上是关于在引导程序中禁用输入。如何将其应用于不同的 TAG?的主要内容,如果未能解决你的问题,请参考以下文章

如何将样式仅应用于引导程序中的特定屏幕类型

首先引导手机?为啥悬停仍然适用于移动设备?如何禁用悬停?

在引导程序中单击元素内部时如何禁用切换功能

如何在 Android 中启用/禁用日志级别?

如何在禁用布局时在引导程序中设置的 Zend 控制器中回显头部链接

如何删除电脑中的错误报告?