決策best_in_place輸入看起來像引導輸入

Question

目前和defaultly，作爲

best_in_place作品編輯之前

一旦在編輯模式下，它看起來像

我想要的是，之前的編輯喜歡像普通（香草）自舉輸入

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

不幸的是，我結合的CSS的所有嘗試和JavaScript已經失敗..

我不能設置吞沒DIV作爲.form控件，因爲它看起來像

我找不出什麼事件來聽點擊字段時（焦點/模糊不起作用.. cl ICK作品，但後來我需要一個點擊即可類型的事件（有沒有這樣的事件） 監聽change事件只會當字段更改工作，但被點擊時，它仍然沒有改變它會胡作非爲

這是一個的jsfiddle http://jsfiddle.net/E8W4X/5/模擬編輯之前（.FORM控制與文本）和編輯模式（一種形式是自動注入div.form對照）

小提琴具有best_in_place的javascript

編輯模式在小提琴中會發生什麼，當你點擊Tim

我想這是什麼樣子的「理想造型」輸入框中這基本上是一個正常的輸入框

，這裏是從的jsfiddle

<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

好了，所以最後我管理這一個html 。

所以看我所做的就是搜索它創建的輸入框，並添加類的形式控制它@線＃317

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

和模糊@行號前加回336

event.target.closest（'div'）。addClass（'form-control'）;

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

這裏是fiddle