textarea
アラートにsweet
タイプを追加する方法がわかりません。に似ている - type: "input"
$('#saveBtn).click(function(){
swal({
title: "Enter your Name!",
text: "your name:",
type: "input",
showCancelButton: true,
closeOnConfirm: false,
showLoaderOnConfirm: true,
animation: "slide-from-top",
inputPlaceholder: "Write something" },
function(inputValue){
if (inputValue === false)
return false;
if (inputValue === "") {
swal.showInputError("You need to write something!");
return false
}
swal("Nice!", "You wrote: " + inputValue, "success");
});
});
これは正常に機能します。しかし、私が使用する場合type: "textarea"
の代わりにtype: "input"
これにより、次のようなエラーが発生します。
sweetalert.min.js:1 Uncaught ReferenceError: logStr is not defined
手伝ってくれてありがとう。
Sweetalertはそれをサポートしていないため、タイプとしてtextarea
を使用することはできません。
モーダルのタイプ。 SweetAlertには、対応するアイコンアニメーションを表示する、「警告」、「エラー」、「成功」、「情報」の4つの組み込みタイプが付属しています。 "input"として設定して、プロンプトモーダルを取得することもできます。キー「type」の下のオブジェクトに配置するか、関数の3番目のパラメーターとして渡すことができます。(ここから取得)
代わりに、text
オプションをtrueに設定することにより、html
オプションでhtmlマークアップを使用できます。ただし、この方法では、textarea内の値をコールバック変数として取得することはできません。そのためには、textareaにIDを指定し、それを使用して値を取得します。
swal({
title: "Enter your Name!",
text: "<textarea id='text'></textarea>",
// --------------^-- define html element with id
html: true,
showCancelButton: true,
closeOnConfirm: false,
showLoaderOnConfirm: true,
animation: "slide-from-top",
inputPlaceholder: "Write something"
}, function(inputValue) {
if (inputValue === false) return false;
if (inputValue === "") {
swal.showInputError("You need to write something!");
return false
}
// get value using textarea id
var val = document.getElementById('text').value;
swal("Nice!", "You wrote: " + val, "success");
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert-dev.js"></script>
元のSweetAlertプラグインは現在サポートされておらず、おそらくテキストエリア機能は表示されません。 textarea
関数を持つ SweetAlert2 を作成しました:
Swal.fire({
title: 'Input something',
input: 'textarea'
}).then(function(result) {
if (result.value) {
Swal.fire(result.value)
}
})
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
SweetAlertからSweetAlert2への移行は簡単です。これが 移行ガイド です。
Sweetalert2を使用している場合、またはsweetalert2を使用する場合は、次のものを含めることができます。
function openSwal(){
swal({
title: "Are you sure you want write somethin' in text area?",
input: "textarea",
inputPlaceholder: "Enter somethinn",
showCancelButton: true,
cancelButtonText: 'Cancel',
confirmButtonText: "Submit ",
inputValidator: function(value) { // validates your input
return new Promise(function(resolve, reject) {
if (value != '' && value != null) {
// document.getElementById('closeComment').value = value; // assign this to other elements in your form
swal("Success!", "You comment: " + value, "success");
// call other functions or do an AJAX call or sumbit your form
}
else {
reject('Please enter a valid text');
}
});
}
})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.11.5/sweetalert2.all.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.0.0/sweetalert2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.0.0/sweetalert2.min.js"></script>
<button id="something" onclick="openSwal();">Open Sweet Alert</button>
テキストの代わりにtextareaを書くことができます