帶有輸入類型范圍問題的 Sweet alert 2 模態
[英]Sweet alert 2 modal with input type range issue
問題描述
有什么方法可以自定義顯示輸入值的輸入（類型范圍）旁邊的 output？ 我希望它顯示值 + %。
到目前為止我嘗試的是給輸入一個自定義類，然后獲取它的<output>標簽並嘗試像這樣操作它的內部文本：
$(document).on('input', 'input', function () {
$(".customSwal output").text( $(".customSwal").val() + " %" )
});
沒有特別成功
$(document).ready(function(){ Swal.fire({ icon: 'question', showCancelButton:'true', cancelButtonColor: '#d33', title: 'Test', text: 'Test', input: 'range', width: '25rem', inputAttributes: { min: 0, max: 100, step: 1, }, inputValue: 0, customClass: { input: 'customSwal', } }) }); //$(document).on('input', 'input', function () { //$(".customSwal output").text( $(".customSwal").val() + " %" ) //});
<:DOCTYPE html> <html> <head> <script src="https.//code.jquery.com/jquery-3.6.0.js"></script> <script src="//cdn.jsdelivr.net/npm/sweetalert2@10"></script> </head> <body> </body> </html>
2 個解決方案
解決方案1
1 2021-04-23 04:21:45
您可以使用$(".customSwal output").text($(this).val() + " %")更改output元素的值。 此外，您還需要在處理程序中使用change事件。
演示代碼：
$(document).ready(function() { Swal.fire({ icon: 'question', showCancelButton: 'true', cancelButtonColor: '#d33', title: 'Test', text: 'Test', input: 'range', width: '25rem', inputAttributes: { min: 0, max: 100, step: 1, }, inputValue: 0, customClass: { input: 'customSwal', } }) //on load $(".customSwal output").text("0 %") }); ///when change occur $(document).on('input change', 'input[type=range]', function() { //get input value $(".customSwal output").text($(this).val() + " %") });
<:DOCTYPE html> <html> <head> <script src="https.//code.jquery.com/jquery-3.6.0.js"></script> <script src="//cdn.jsdelivr.net/npm/sweetalert2@10"></script> </head> <body> </body> </html>
解決方案2
1 已采納 2021-04-24 08:36:10
您可以通過簡單地添加此 CSS 將%字符添加到范圍的 output：
Swal.fire({ input: 'range', inputAttributes: { min: 0, max: 100, }, inputValue: 25 })
.swal2-range output::after { content: '%'; }
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
帶條件的甜蜜警報輸入
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.