Question

目前默认情况下，best_in_place可以作为

编辑前

enter image description here

一旦处于编辑模式，它就像

enter image description here

我想要的是之前的编辑就像常规（香草）引导输入

enter image description here

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

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

我无法将吞没div设置为.form-control，因为它看起来像 enter image description here

我无法弄清楚在点击字段时要听什么事件（焦点/模糊不起作用..点击工作但我需要点击一下类型事件（是否有这样的事件）听取更改事件只会在字段更改时起作用，但是当单击它但尚未更改时它会行为错误

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

小提琴有best_in_place 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>

Answer 1

您不需要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.

Answer 2

好的，我终于成功了。

所以，看看我所做的是搜索它创建输入框的位置，并将类形式控件添加到它@ line＃317

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

并在模糊@ line＃336之前添加回来

~~event.target.closest（ 'DIV'）addClass（ '形式控制'）;~~

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

以下是 fiddle

使best_in_place输入看起来像bootstrap输入

2 个答案: