javascript - 如何让 div 充当输入
问题描述
我设置了一个复选框,它将显示一个进度条并按百分比显示其当前进度。如何使 div 标签充当输入以将值保存到数据库中
我尝试在 div 上使用它并显示百分比,但是当我使用输入尝试它时,它无法显示百分比
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="progressbar-container">
<div class="progressbar-bar"></div>
<div class="progressbar-label"></div>
<input type="" name="" id="percentage">
$(document).ready(function() {
// get box count
var count = 0;
var checked = 0;
function countBoxes() {
count = $("input[type='checkbox']").length;
console.log(count);
}
countBoxes();
$(":checkbox").click(countBoxes);
// count checks
function countChecked() {
checked = $("input:checked").length;
var percentage = parseInt(((checked / count) * 100), 10);
$(".progressbar-bar").progressbar({
value: percentage
});
$(".progressbar-label").text(percentage + "%");
$('#percentage').text(percentage + "%")
}
countChecked();
$(":checkbox").click(countChecked);
解决方案
您可以使用该contenteditable
属性,然后通过innerHTML
.
推荐阅读
- python - 我正在尝试将公司交易量的平均值与同一公司的每日交易量进行比较,并找出 pandas 的差异。我在公司做了groupby
- android - Android,在 ViewGroup 的子项上捕获单点事件,但在父项上双击事件
- python - 在 Django 视图中获取列表索引必须是整数
- python - 从 CoinMarketCap 的表中提取数据
- linux - 为什么 gcc 汇编器生成带有两个程序段的 ELF 文件?
- node.js - Sequelize v6 - TypeError: sequelize.import 不是函数
- node.js - NodeJS广播频道仅以一种方式工作
- javascript - Nuxt 中的 ESLint 问题
- php - Laravel 8:使用数据库表检查用户数据无法正常工作
- reactjs - 方法调用“await axios.post”并返回结果未被阻塞