如何根據表單中輸入的信息進行實時預覽？ PhP / ajax？

Question

我正在一個項目上，在其中實現“實時預覽”功能將非常方便。 問題是它不是某種類型的文本預覽“例如，創建問題時類似stackoverflow的預覽”。 我正在從事的工作略有不同。 例如，我有一個帶有輸入的表單，例如（背景色，填充值，邊距值等）。每次用戶更新其中一個輸入時，我都不希望在表單旁邊顯示更新對象的預覽，可以這樣說對象是根據用戶在表單中輸入的內容進行div樣式設置的。

如何實現此功能？

最好使用基於jQuery的解決方案。

編輯：說這是表格的樣子

<form id="div_builder">
   <input type="text" name="background_color"/>
   <input type="text" name="padding"/>
   <input type="text" name="margin"/>
</form>

Answer 1

變更事件是您的朋友。 每次更改時，調用一個函數，將選定的屬性分配給要顯示的div。

Answer 2

不是testet，但應該可以（與jQuery）...

<form id="div_builder">
   <input type="text" name="background-color"/>
   <input type="text" name="padding"/>
   <input type="text" name="margin"/>
</form>

<div id="object"><img src="some object" /></div>

<script type="text/javascript">
$('#div_builder input').change(function(){
   var css = $(this).attr("name");
   $("#object").css(css,$(this).val());
})
</script>