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

change event 是您的朋友。每次更改时，调用一个函数，将所选属性分配给您要显示的 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>