1、text
swal({
title: 'Input something',
input: 'text',
showCancelButton: true,
inputValidator: function (value) {
return new Promise(function (resolve, reject) {
if (value) {
resolve()
} else {
reject('You need to write something!')
}
})
}
}).then(function (result) {
swal({
type: 'success',
html: 'You entered: ' + result
})
})2、email
swal({
title: 'Input email address',
input: 'email'
}).then(function (email) {
swal({
type: 'success',
html: 'Entered email: ' + email
})
})3、password
swal({
title: 'Enter your password',
input: 'password',
inputAttributes: {
'maxlength': 10,
'autocapitalize': 'off',
'autocorrect': 'off'
}
}).then(function (password) {
if (password) {
swal({
type: 'success',
html: 'Entered password: ' + password
})
}
})4、textarea
swal({
input: 'textarea',
showCancelButton: true
}).then(function (text) {
if (text) {
swal(text)
}
})5、select
swal({
title: 'Select Ukraine',
input: 'select',
inputOptions: {
'SRB': 'Serbia',
'UKR': 'Ukraine',
'HRV': 'Croatia'
},
inputPlaceholder: 'Select country',
showCancelButton: true,
inputValidator: function (value) {
return new Promise(function (resolve, reject) {
if (value === 'UKR') {
resolve()
} else {
reject('You need to select Ukraine :)')
}
})
}
}).then(function (result) {
swal({
type: 'success',
html: 'You selected: ' + result
})
})6、radio
// inputOptions can be an object or Promise
var inputOptions = new Promise(function (resolve) {
setTimeout(function () {
resolve({
'#ff0000': 'Red',
'#00ff00': 'Green',
'#0000ff': 'Blue'
})
}, 2000)
}) swal({
title: 'Select color',
input: 'radio',
inputOptions: inputOptions,
inputValidator: function (result) {
return new Promise(function (resolve, reject) {
if (result) {
resolve()
} else {
reject('You need to select something!')
}
})
}
}).then(function (result) {
swal({
type: 'success',
html: 'You selected: ' + result
})
})
7、checkbox
swal({
title: 'Terms and conditions',
input: 'checkbox',
inputValue: 1,
inputPlaceholder:
'I agree with the terms and conditions',
confirmButtonText:
'Continue <i class="fa fa-arrow-right></i>',
inputValidator: function (result) {
return new Promise(function (resolve, reject) {
if (result) {
resolve()
} else {
reject('You need to agree with T&C')
}
})
}
}).then(function (result) {
swal({
type: 'success',
text: 'You agreed with T&C :)'
})
})8、file
swal({
title: 'Select image',
input: 'file',
inputAttributes: {
accept: 'image/*'
}
}).then(function (file) {
var reader = new FileReader
reader.onload = function (e) {
swal({
imageUrl: e.target.result
})
}
reader.readAsDataURL(file)
})9、range
swal({
title: 'How old are you?',
type: 'question',
input: 'range',
inputAttributes: {
min: 8,
max: 120,
step: 1
},
inputValue: 25
})10、多输入框
不支持多输入框，但是可以使用html and preConfirm自己来实现
swal({
title: 'Multiple inputs',
html:
'<input id="swal-input1" class="swal2-input">' +
'<input id="swal-input2" class="swal2-input">',
preConfirm: function () {
return new Promise(function (resolve) {
resolve([
$('#swal-input1').val(),
$('#swal-input2').val()
])
})
},
onOpen: function () {
$('#swal-input1').focus()
}
}).then(function (result) {
swal(JSON.stringify(result))
}).catch(swal.noop)