javascript - 使 best_in_place 输入看起来像 Bootstrap 输入

Question

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

编辑前

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

我想要的是编辑之前想要一个常规( Vanilla ) Bootstrap 输入

在编辑模式下，它看起来就像是在编辑一个普通的输入框

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

我不能将吞没 div 设置为 .form-control 因为它看起来像

当我点击该字段时，我不知道要听什么事件(焦点/模糊不起作用..点击有效，但我需要一个点击离开类型的事件(是否有这样的事件)监听更改事件仅在字段更改时有效，但在单击但未更改时会出现错误

这是一个 jsfiddle http://jsfiddle.net/E8W4X/5/模拟编辑前(带有文本的.form-control)和编辑模式(表单自动注入(inject)div.form-control)

fiddle 有最好的 javascript

fiddle 中的编辑模式是当您点击 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>

Answer 1

您不需要 JavaScript 或新的 CSS 类来解决这个问题。 gem 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.