js-jquery-SweetAlert2【三】INPUT TYPES

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)