HTML textarea的值正在重置

我有一個文本區域即時通訊使用作爲一個XML編輯器的排序。我也有一個按鈕，打開一個對話框（隱藏div），有幾個字段，當按下對話框上的done按鈕時，會生成一個xml標籤並附加到textarea的末尾，我的問題是當我試圖隱藏在此之後的對話框中，文本區域被重置爲其原始值。有任何想法嗎？HTML textarea的值正在重置

<html> 
<head> 
<style> 
.buttonPane{ 
background: grey; 
padding:20px; 
} 
.dialog{ 
width: 50%; 
min-width:300px; 
position: absolute; 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%); 
background: grey; 
padding: 20px; 
border: 3px solid black; 
} 
.dialog input{ 
width:80%; 
margin:10px; 
} 
</style> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script type="text/Javascript"> 
$(document).ready(function(){ 
var content = ""; 
var editor = $('#mainEditor'); 
$('#insert_choice').click(function(){ 
content = editor.val(); 
$('#choice').show(); 
editor.val(content); 
}); 
$('#choice_cancel').click(function(){ //cancel button 
$('#choice').hide() 
}); 
$('#choice_add').click(function(){ //add button 
editor.val(content); 
var choicePrompt = $('#choicePrompt').val(); 
var choiceOption1 = $('#choiceOption1').val(); 
var choiceOption2 = $('#choiceOption2').val(); 
var choiceOption3 = $('#choiceOption3').val(); 
var choiceOption4 = $('#choiceOption4').val(); 
var choice = "<choice>" + choicePrompt + "::" + choiceOption1 + "::" + choiceOption2 + "::" + choiceOption3 + "::" + choiceOption4 + "</choice>"; 
editor.val(editor.val() + choice); 
content = editor.val(); 
$('#choice').hide() 
}); 
editor.val(content); 
}); 
</script> 
</head> 

<body> 
<form action=""> 
<div class="buttonPane"> 
<button id="insert_choice">Insert Choice </button> 
</div> 
<br/> 
</form> 
<input type="submit" value="Submit"> 
<textarea id='mainEditor' style='width:100%; height: 500px;'></textarea> 
<input type="submit" value="Submit"> 
<div id="choice" class="dialog"> 
Choice Prompt: <input id="choicePrompt" type="text"/><br/> 
Option 1: <input id=choiceOption1" type="text"/><br/> 
Option 2: <input id=choiceOption2" type="text"/><br/> 
Option 3: <input id=choiceOption3" type="text"/><br/> 
Option 4: <input id=choiceOption4" type="text"/><br/> 
<button id="choice_add">Add Choice</button> 
<button id="choice_cancel">Cancel</button> 
</div> 
</body> 
</html>

來源

2015-01-09 dapizzamon22

我想這是因爲你的表單中沒有按鈕，沒有type屬性，按鈕的默認類型是提交。所以當點擊插入按鈕打開對話框時，實際上是在提交表單並重新加載頁面。

只需添加一個type="button"屬性來阻止它：

<button type="button" id="insert_choice">Insert Choice</button>

jsFiddle example

來源

2015-01-09 21:52:38 j08691

完美！當人們比我聰明時，我喜歡它！ – dapizzamon22 2015-01-09 22:03:39

HTML textarea的值正在重置

回答

相關問題