使 best_in_place 输入看起来像引导输入

Posted 2023-02-15

【中文标题】使 best_in_place 输入看起来像引导输入

【英文标题】：making best_in_place input look like bootstrap input

【发布时间】：2014-03-12 19:17:37

【问题描述】：

目前和默认情况下，best_in_place 用作

编辑前

一旦进入编辑模式，它看起来像

我想要的是，之前的编辑想要一个常规（香草）引导输入

在编辑模式下，它看起来就像在编辑常规输入框

不幸的是，我所有将 css 和 javascript 结合起来的尝试都失败了..

我无法将吞噬 div 设置为 .form-control，因为它看起来像

我不知道点击该字段时要听什么事件（焦点/模糊不起作用..点击有效，但我需要点击离开类型事件（是否有这样的事件） 监听 change 事件只会在字段更改时起作用，但是当它被单击但未更改时，它会行为不端

这是一个 jsfiddle http://jsfiddle.net/E8W4X/5/ 来模拟编辑前（.form-control 与文本）和编辑模式（一个表单自动注入到 div.form-control）

小提琴有最好的 javascript

小提琴中的编辑模式是当你点击 Tim 时会发生什么

我希望它看起来像“所需样式”中的输入框，基本上是一个普通的输入框

这是来自 jsfiddle 的 html

<div class="row">
    <div class="col-lg-2">
        <div class="panel">
            <fieldset>
                <div class="form-group">
                      <label>before edit mode</label>
                    <div class="form-control">
                        Tim
                    </div>


                    <label>edit mode</label>
                    <div class="form-control">
                        <form class="form_in_place" action="javascript:void(0);" style="display:inline">
                            <input type="text" name="first_name">
                        </form>
                    </div>
                </div>
            </fieldset>
        </div>
    </div>
</div>

【问题讨论】：

出于某种原因，我仍然无法理解您想要什么。编辑模式到底是什么意思？

这就是你要找的东西吗？jsfiddle.net/E8W4X/2

查看更新后的小提琴，其行为与 best_in_place jsfiddle.net/E8W4X/5

你检查我给出的答案了吗？

@NickGinanto 我提供了一个不需要 javascript 的答案。

【参考方案1】：

好吧，我终于成功了。

所以看看我所做的是搜索它在哪里创建输入框并向它添加类表单控件@line# 317

output.parents('div.form-control').removeClass('form-control');

并将其添加回模糊 @ line#336 之前

event.target.closest('div').addClass('form-control');

jQuery(event.target).closest('div').addClass('form-control');

这里是fiddle

【讨论】：

我忘记了 event.target 是一个 html 对象而不是 jquery 对象。现在一切都好。仅供参考，您也可以对其他输入进行编辑和执行相同操作。

这确实有效，但这会改变插件的来源。有没有办法在不改变来源的情况下做到这一点？

不。我想不出其他不需要更改源代码的解决方案。但如果你注意到，我只是改变了输入的外观。甚至没有html结构。你介意说一下，是什么让你无法使用它？

best_in_place 是我不维护的 ruby​​ gem，如果我更改代码，我将不得不维护自己的单独版本以供将来更新。我希望可以从插件源外部使用 css/js 来改变行为

好吧，那么您必须添加自定义事件侦听器来侦听 bestinplace 的“输入”创建和“模糊”事件并自己添加代码。

【参考方案2】：

您不需要 JavaScript 或新的 CSS 类来解决这个问题。宝石supports additional attributes to the options hash。您想添加:inner_class 以更改表单字段的类。 Bootstrap 使用 CSS 类 .form-control 来应用其自定义外观。

我的解决方案将使用 HAML，但您也可以使用 ERB 或 SLIM。

= best_in_place @user, :name, type: :input, inner_class: 'form-control'

You can even apply attributes globally to all bip form fields.