以下代码有效但是，我必须将keyup事件绑定到文档就绪的每个输入。有没有办法改变它，以便每个输入类型文本通过在keyup上提供自己的id自动更新？或许像一个班级？
以下代码有效但是，我必须将keyup事件绑定到文档就绪的每个输入。有没有办法改变它，以便每个输入类型文本通过在keyup上提供自己的id自动更新？或许像一个班级？
我还清楚地评论了代码。
这是我到目前为止所得到的：
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="https://pingendo.github.io/templates/blank/theme.css" type="text/css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://pingendo.com/assets/bootstrap/bootstrap-4.0.0-alpha.6.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
// Create global timer outside keyup scope.
var timer;
var client_id = '#CLIENT_ID';
var project_id = '#PROJECT_ID';
var mainsheet_id = '#MAINSHEET_ID';
// Random target html element id we want to bind.
var target_id = '#WTRESRVD';
// Bind keyup event to target html element id.
$(target_id).keyup(function() {
// If timer has been set but user still typing...
if (timer) {
// Reset timer and abort function call.
clearTimeout(timer);
}
// Set timer to tick in 1 second for 1 second then call function and stop.
timer = setTimeout(function(event) {
autoSave(client_id, project_id, mainsheet_id, target_id);
}, 1000); //wait 1000 milliseconds before triggering event.
});
function autoSave(client_id, project_id, mainsheet_id, target_id) {
var client_id = $(client_id).val();
var project_id = $(project_id).val();
var mainsheet_id = $(mainsheet_id).val();
// Create variable for input text value by id to get all text up to last entered keystroke.
var target_element = $(target_id).val();
// Trim it to avoid triggering AJAX call for pressing space bar eg.(nothing to save..)
var target_element = $.trim(target_element);
// If there is something other than nothing typed in...
// This pretty much triggers on every single keyup stroke NOT including spaces, etc..
// Maybe sanitize sanitize it some more???
if (target_element != '') {
// AJAX POST request to run MySQL UPDATE query on this database field ( WTRESRVD ).
$.ajax({
url: "processor.php",
method: "POST",
data: {
postCLIENT_ID: client_id,
postPROJECT_ID: project_id,
postMAINSHEET_ID: mainsheet_id,
postTARGETELEMENT: target_element
},
dataType: "text",
beforeSend: function() {
// setting a timeout
$('#status').text('Please wait...');
},
success: function(data) {
// If data return after a successful request isn't an empty string..
if (data != '') {
// DO something.
}
// Create variable time to reference later.
var time = showTime();
// Update div status with last saved time stamp then..
$('#status').text("Draft Autosaved " + time).show();
// ..fadeOut over 3 seconds.
$('#status').fadeOut(3000);
}
});
}
}
});
function showTime() {
var timeNow = new Date();
var hours = timeNow.getHours();
var minutes = timeNow.getMinutes();
var seconds = timeNow.getSeconds();
var timeString = "" + ((hours > 12) ? hours - 12 : hours);
timeString += ((minutes < 10) ? ":0" : ":") + minutes;
timeString += ((seconds < 10) ? ":0" : ":") + seconds;
timeString += (hours >= 12) ? " P.M." : " A.M.";
return timeString;
}
</script>
<div class="py-2">
<div class="container">
<div class="row">
<div class="col-md-12">
<h3 class="">Autosave 4.0 - Cat 2 - Main Sheet</h3>
</div>
</div>
</div>
</div>
<div class="p-2">
<div class="container">
<div class="row">
<div class="col-md-12">
<form action="tab5_processor.php" class="text-muted">
<div class="row">
<div class="col-md-4">
<div class="form-group"> <label class="control-label">CLIENT ID</label>
<input class="form-control" id="CLIENT_ID" name="CLIENT_ID" placeholder="input_text_value" type="text" value="111"> </div>
</div>
<div class="col-md-4">
<div class="form-group"> <label class="control-label">PROJECT ID</label>
<input class="form-control" id="PROJECT_ID" name="PROJECT_ID" placeholder="input_text_value" type="text" value="222"> </div>
</div>
<div class="col-md-4">
<div class="form-group"> <label class="control-label">MAINSHEET ID</label>
<input class="form-control" id="MAINSHEET_ID" name="MAINSHEET_ID" placeholder="input_text_value" type="text" value="333"> </div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<table class="table table-striped">
<colgroup>
<col width="50">
<col width="100">
<col width="100"> </colgroup>
<thead>
<tr>
<th> </th>
<th>QTY</th>
<th>CODE</th>
<th>DESCRIPTION</th>
</tr>
</thead>
<tbody>
<tr>
<td>EA</td>
<td>
<input class="form-control" id="WTRESRVD" name="WTRESRVD" placeholder="" type="text" value="" maxlength="4"> </td>
<td>WTRESRVD</td>
<td>EMERGENCY SERVICE CALL</td>
</tr>
<tr>
<td>EA</td>
<td>
<input class="form-control" id="WTRESRV" name="WTRESRV" placeholder="" type="text" value="" maxlength="4"> </td>
<td>WTRESRV</td>
<td>EMERGENCY SERVICE CALL AFTER HRS</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="" id="status">Update Status...</p>
</div>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：1)
有没有办法改变它，以便每个输入类型文本通过在keyup上提供自己的id来自动更新？
您可以将keyup事件处理程序附加到每个输入类型文本，如：
$('input[type="text"]').on('keyup', function(e) {
.....
})
答案 1 :(得分：1)
我必须将keyup事件绑定到文档就绪的每个输入。有没有办法改变它，以便每个输入类型文本通过在keyup上提供自己的id来自动更新
我建议将文件上的一个事件用于所有输入的密钥：
$(document).on('keyup', 'input[type="text"]', function(){
// whatever you want here
});
这样，即使您动态添加新输入，它们也会触发事件键。
答案 2 :(得分：1)
为要收听的所有输入添加公共类，或使用更通用的类似$('tbody input')
$('tbody input').on('keyup', function(){
// `this` is input event occured on
var id = this.id;
});
似乎你不需要autosave()中的大多数参数，因为除了函数内已有的其他固定元素的输入id之外，其他所有参数都是