Проверьте этот плагин jQuery. Он точно делает то, что вы ищете.
JEditable Если вы не склонны к использованию плагина, то попробуйте следующий код:
<div>
<div>
<label class="editable">Name</label>
<input class="editable" type="text" name="name" style="display:none"/>
</div>
<div>
<label class="editable">Type</label>
<input class="editable" type="text" name="type" style="display:none"/>
</div>
<div>
<a class="edit" href="#">Edit</a>
</div>
</div>
<script type="text/javascript">
$(function(){
$(".edit").click(function(){
var $this = $(this);
var text = $this.text();
if(text=="Edit"){
$this.text("Cancel");
}
else{
$this.text("Edit");
}
$(".editable").toggle();
});
$("input.editable").change(function(){
$(this).prev().text($(this).text());
});
});
</script>
Чтобы связать обработчик события клика к элементу анкера использовать живую функцию JQuery. например:
$("a.ff-save").live("click", function(){
alert("ok");
});
Короткая подсказка: используйте текстовое поле, когда ваше текстовое поле заполнено, чтобы его уменьшить. – Vesper
Что вы имеете в виду с помощью выравнивания на основе ввода? Это может означать тысячу вещей. –
Возможный дубликат [Заполните вопросы о пробелах в flex с помощью сценария действий] (http://stackoverflow.com/questions/38626850/fill-in-the-blanks-questions-in-flex-using-action-script) – Vesper