jQuery text（）函数不接受input.val（）

Question

I'd like to set up a preview area that shows what some inputted text looks like in situ. However, I'm struggling to get this jQuery function with text() to work.

whilst this works (displays "some sample text" in #preview when the form is submitted:

$("form").submit(function () {
              $("#preview").text("some sample text").show();
              return false;
            });

this doesn't work, and shows nothing when I try to take the contents of the text field and use that instead in the preview box:

$("form").submit(function () {
              $("#preview").text($("input:first").val()).show();
              return false;
            });

Any idea why? Probably dead simple and I'm just missing it.

Answer 1

The code works fine in a fiddle. Make sure #preview has a declared height and width, otherwise it may not be visually distinct.

See working demo: http://jsfiddle.net/js4XU/

Answer 2

最后，我将其重写为更多的“实时预览”，并使用keyup()函数捕获输入的val，而不是在表单提交后请求。