如何根据表单中输入的信息进行实时预览？ 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>