我有一個表單文本區域和兩個輸入字段。我想讓用戶能夠點擊一個「預覽」鏈接,並獲取他剛剛輸入到div中的表單的內容。將輸入字段的內容複製到隱藏區域
該div由燈箱使用,將顯示內容作爲預覽。那有意義嗎?我需要一些認真的幫助。非常感謝。
我有一個表單文本區域和兩個輸入字段。我想讓用戶能夠點擊一個「預覽」鏈接,並獲取他剛剛輸入到div中的表單的內容。將輸入字段的內容複製到隱藏區域
該div由燈箱使用,將顯示內容作爲預覽。那有意義嗎?我需要一些認真的幫助。非常感謝。
<a href="#" onclick="renderPreview();">preview</a>
<script>
function renderPreview() {
document.getElementById('preview').innerHTML=document.getElementById('txt-input').value;
}
</script>
jQuery的版本
工作示例:http://jsfiddle.net/yvTNc/4/
HTML
<input id="inputItem" type="text" size="20" /><br><br>
<a href="#" id="renderPreview">Preview</a><br><br>
<div id="hiddenDiv"></div>
CSS
#hiddenDiv{display:none;}
jQuery的
$('#renderPreview').click(function(){
$.('#hiddenDivId').html($('#inputItemId').val());
});
<a href="#" onclick="showPreview(); return false;">Show preview</a>
<script type="text/javascript">
function showPreview() {
$('#hiddenDiv').html('<p>'+$('#textarea').val()+'</p>').show();
}
</script>
使用jQuery你可以做類似如下:
<form>
<input type="text" id="input-lastname" name="lastname" value=""/>
<input type="text" id="input-firstname" name="firstname" value=""/>
<textarea id="input-text' rows="10" cols="10"/>
</form>
<a href="#" id="preview-invoke">Preview</a>
<div id="preview" style="display:none">
<p id="preview-firstname"></p>
<p id="preview-lastname"></p>
<p id="preview-text"></p>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#preview-invoke').click(function(evt) {
evt.stopPropagation();
$('#preview-firstname').html($('#input-firstname').val());
$('#preview-lastname').html($('#input-lastname').val());
$('#preview-text').html($('#input-text').val());
//TODO: invokeLightBox();
return false;
});
});
</script>
這裏唯一的問題是: 「這是否有意義?」。這個問題的答案是「是」,但這顯然不是你想要的。請重新說明這個問題,以便它實際提出一個關於如何使用代碼做些事情的問題。我不知道你不能做什麼。 – tster 2011-02-02 18:25:02