Как сделать кнопку редактирования для превращения полей в формы?

Question

[DevRev]

Здравствуйте дорогие друзья!
Имеется дизайн, и задумка при нажатии на карандашик поле должно становится активным и готовым к редактированию следующим образом...

Обычное поле

Активное поле
Помогите пожалуйста советом как это можно сделать.
Верстаю с помощью бутстрапа

<div class="form-group">
							    <label for="user-phone" class="col-sm-2 control-label">Номер телефона</label>
							    <div class="col-sm-5">
							      <input type="tel" class="form-control" id="user-phone" placeholder="[phone]">
							    </div>
							  </div>

Answer 1

[tridcatij]

Jeditable

Answer 2

[Алексей]

JS + Информация по тегу Input = решение.

Comments

[DevRev]

У меня хромают знания js, вы можете мне написать функции?

[Алексей Уколов]

С хромотой вам к доктору. Здесь не место, где за вас всё сделают.

[DevRev]

Алексей Уколов: Хорошо понятно

Answer 3

[Павел Гришин]

А если в свободном состоянии у инпута убрать бордер и цвет фона прозрачный, а при фокусе давать бордер.
что то вроде https://jsfiddle.net/2m2kbcg2/