2
我想創建一個攝像頭列表，允許用戶輸入自定義名稱，如果需要的話。理想情況下，當他們選擇複選框或周圍文本時，他們將能夠更改文本。名稱將需要稍後存儲在數據庫中。複選框的用戶可編輯標籤
我試過使用「簡單的可編輯文本」，但我無法弄清楚。 這是我的。任何幫助，將不勝感激。謝謝。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title>FMVSS - Camera Selection</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.js"></script>
</head>
<body>
<div data-role="page">
<h1>Camera Selection</h1>
<div data-role="content">
<form action="#" method="get">
<h3>Camera request for: (Customer Name, passed or queryied)</h3>
<h3>Test Type: (Passed or queryied)</h3>
<div data-role="fieldcontain">
<div><legend>Do a look-up to see what the default views are for the selected TEST TYPE</legend></div>
<div><legend>Allow custom entries</legend></div>
<fieldset data-role="Selections">
<div class="Fixed_Camera_Check_Box">
<input type="checkbox" name="CameraView-1" id="CameraView-1" />
<label for="CameraView-1">Oblique View From Front (Left Hand Side)</label>
</div>
<div class="Fixed_Camera_Check_Box">
<input type="checkbox" name="CameraView-2" id="CameraView-2" />
<label for="CameraView-2">Oblique View From Front (Right Hand Side)</label>
</div>
<div class="Fixed_Camera_Check_Box">
<input type="checkbox" name="CameraView-3" id="CameraView-3" />
<label for="CameraView-3">Oblique View From Rear (Right Hand Side)</label>
</div>
<div class="Custom_Camera_Check_Box">
<input type="checkbox" name="CameraView-7" id="CameraView-7" />
<label class="custom" for="CameraView-7">Custom Camera View #1 ***Value should be editable by user***</label>
</div>
<div class="Custom_Camera_Check_Box">
<input type="checkbox" name="CameraView-8" id="CameraView-8" />
<label class="custom" for="CameraView-8">Custom Camera View #2</label>
</div>
</fieldset>
</div>
</form>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
<script>
$(document).ready(function(){
$('.custom').click(function(){ //this runs when you click on the
$(this).html('New Label Here'); //I can edit the label here, so I know I am in the right place
//$(this).hide(); //Should hide the label making room for the input
$(this).append('<input class="custom_edit" type="text" value="Custom Camera View"/>'); //Puts an input field in the form
});
$('.custom_edit').blur(function() { //this runs after you click out of textbox
if ($.trim(this.value) == '') //If there is nothing in the textbox do this
{} //put previous value back
else //If there is something in the textbox do this
{$(this).prev().html(this.value);} //Put new value into label
$(this).hide(); //Hides text box
$(this).prev().show(); //Shows the label
});
$('.custom_edit"]').keypress(function(event) { //runs on every keystroke while in a textbox, looking for enter
if (event.keyCode == '13')
{ //"ENTER" was pressed alert('1');
if ($.trim(this.value) == '') //If there is nothing in the textbox do this
{} //put previous value back and unselect checkbox
else//If there is something in the textbox do this
{$(this).prev().html(this.value);} //Put new value into label
$(this).hide(); //Hides the edit box
$(this).prev().show(); //Shows the label
}
});
$('input[type=checkbox]').on('click',function(e) {
if($('input[type=checkbox]:checked').length == 3)
{$('input[type=checkbox]:not(:checked)').attr('disabled','disabled');}
else
{$('input[type=checkbox]:not(:checked)').removeAttr('disabled');}
});//endo of checkbox click functions
});//end of document ready
</script>
爲什麼您的腳本在關閉html標記之外？ – kmb64
我剛剛在最後一分鐘粘貼它，它在一個單獨的.js文件中 – BTThomas