首先,如果這是我的愚蠢,請道歉。我已經在 Stackoverflow 上搜索過,并在谷歌上搜索過,但沒有找到任何與我想要完成的事情類似的事情。
我有一個表格,表格中有幾列帶有 ContentEditable 標記,我正在嘗試設定一些內容,以便將輸入限制為僅 2 個小數位以包含貨幣。
到目前為止我所擁有的 - 由于它針對輸入標簽,因此不起作用。
(function($) {
$.fn.inputFilter = function(inputFilter) {
return this.on("input keydown keyup mousedown mouseup select contextmenu drop",
function() {
if (inputFilter(this.value)) {
this.oldValue = this.value;
this.oldSelectionStart = this.selectionStart;
this.oldSelectionEnd = this.selectionEnd;
} else if (this.hasOwnProperty("oldValue")) {
this.value = this.oldValue;
this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
} else {
this.value = "";
}
});
};
}(jQuery));
$(document).ready(function() {
$("#currencyTextBox").inputFilter(function(value) {
return /^\d*$/.test(value); // Allow digits only, using a RegExp
});
});
HTML 的一面
<table id="QuoteTable" class="table table-bordered table-responsive-md table-
striped text-center">
<thead class="bg-white">
<tr>
<th class="text-center">Stock Code</th>
<th class="text-center">Item Description</th>
<th class="text-center">Quantity of Item</th>
<th class="text-center">Unit Cost Exc VAT (£)</th>
<th class="text-center">Unit Cost Inc VAT (£)</th>
<th class="text-center">Total Cost</th>
<th class="text-center">Remove from List</th>
</tr>
</thead>
<tbody id="Products" class="bg-white">
<tr>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
<td contenteditable='true'>1</td>
<td id="currencyTextBox" contenteditable='true'>0.00</td>
<td id="currencyTextBox" contenteditable='true'>0.00</td>
<td class="bg-secondary" contenteditable='false'></td>
<td class="bg-secondary" contenteditable='false'></td>
</tr>
</tbody>
</table>
如果有人知道任何替代方法,我可以讓我的 contentEditable td 標簽限制輸入,我很想聽聽。
由于網站其余部分的樣式以及我之后將表資料發送到陣列的方式,我無法在 td 標簽內使用輸入標簽。
uj5u.com熱心網友回復:
由于您沒有使用Input元素,因此 value 將是未定義的。你會想要使用它innerText。這將是節點的文本值。
轉載請註明出處,本文鏈接:https://www.uj5u.com/yidong/397095.html
標籤:javascript html 查询 html-table 内容可编辑
上一篇:滾動影片-影片構建問題
