使best_in_place輸入看起來像bootstrap輸入

Question

目前和默認情況下，best_in_place可以作為

在編輯之前

一旦處於編輯模式，它看起來像

我想要的是之前的編輯就像常規（香草）引導輸入

在編輯模式下，它看起來像編輯常規輸入框

不幸的是，我所有組合css和javascript的嘗試都失敗了..

我不能將吞沒div設置為.form-control，因為它看起來像

我無法弄清楚當點擊該字段時要聽什么事件（焦點/模糊不起作用..點擊工作但我需要點擊一下類型事件（是否有這樣的事件）聽取更改事件會只有當字段被更改時才能工作，但是當它被點擊但沒有改變時它會行為不端

這是一個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類來解決此問題。 gem 支持options hash的其他屬性 。 您想要添加:inner_class來更改表單字段的類。 Bootstrap使用CSS類.form-control來應用其自定義外觀。

我的解決方案將在HAML中，但您也可以在ERB或SLIM中使用相同的解決方案。

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

您甚至可以將屬性全局應用於所有bip表單字段。

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');

這是小提琴