Question

我正在开发一个项目，在其中实现“实时预览”功能非常方便。问题是它不是某种类型的文本预览“例如，当你创建一个问题时，就像在stackoverflow上一样”。我正在做的工作略有不同。例如，我有一个输入形式的表单（背景颜色，填充值，边距值等...）每次用户更新其中一个输入时，我不想在表单旁边显示更新对象的预览，让我们说这个object是基于用户在表单中输入的内容进行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>

如何根据表单中输入的信息进行实时预览？ PHP / AJAX？

2 个答案: