Merge pull request #5170 from wenzhixin/feature/5168

Change the input type to search instead of text

src/bootstrap-table.js

@@ -737,7 +737,7 @@ class BootstrapTable {
       )
       const searchInputHtml = `<input class="${this.constants.classes.input}
         ${Utils.sprintf(' %s%s', this.constants.classes.inputPrefix, opts.iconSize)}
-        search-input" type="text" placeholder="${opts.formatSearch()}" autocomplete="off">`
+        search-input" type="search" placeholder="${opts.formatSearch()}" autocomplete="off">`
       let searchInputFinalHtml = searchInputHtml
 
       if (opts.showSearchButton || opts.showSearchClearButton) {
@@ -757,7 +757,7 @@ class BootstrapTable {
       this.$toolbar.append(html.join(''))
       const $searchInput = this.$toolbar.find('.search input')
       const handleInputEvent = () => {
-        const eventTriggers = `keyup drop blur ${Utils.isIEBrowser() ? 'mouseup' : ''}`
+        const eventTriggers = 'keyup drop blur mouseup'
         $searchInput.off(eventTriggers).on(eventTriggers, event => {
           if (opts.searchOnEnterKey && event.keyCode !== 13) {
             return

src/extensions/filter-control/bootstrap-table-filter-control.js

@@ -20,7 +20,7 @@ $.extend($.fn.bootstrapTable.defaults, {
   filterTemplate: {
     input (that, field, placeholder, value) {
       return Utils.sprintf(
-        '<input type="text" class="form-control bootstrap-table-filter-control-%s search-input" style="width: 100%;" placeholder="%s" value="%s">',
+        '<input type="search" class="form-control bootstrap-table-filter-control-%s search-input" style="width: 100%;" placeholder="%s" value="%s">',
         field,
         'undefined' === typeof placeholder ? '' : placeholder,
         'undefined' === typeof value ? '' : value

src/themes/bulma/bootstrap-table-bulma.js

@@ -33,7 +33,7 @@ $.BootstrapTable = class extends $.BootstrapTable {
     this.constants.html.dropdownCaret = '<span class="icon is-small"><i class="fas fa-angle-down" aria-hidden="true"></i></span>'
     this.constants.html.pagination = ['<ul class="pagination%s">', '</ul>']
     this.constants.html.paginationItem = '<li><a class="page-item pagination-link%s" aria-label="%s" href="#">%s</a></li>'
-    this.constants.html.searchInput = '<p class="control"><input class="%s input-%s" type="text" placeholder="%s"></p>'
+    this.constants.html.searchInput = '<p class="control"><input class="%s input-%s" type="search" placeholder="%s"></p>'
     this.constants.html.inputGroup = '<div class="field has-addons has-addons-right">%s%s</div>'
     this.constants.html.searchButton = '<p class="control"><button class="%s" type="button" name="search" title="%s">%s %s</button></p>'
     this.constants.html.searchClearButton = '<p class="control"><button class="%s" type="button" name="clearSearch" title="%s">%s %s</button></p>'

src/themes/foundation/bootstrap-table-foundation.js

@@ -32,7 +32,7 @@ $.BootstrapTable = class extends $.BootstrapTable {
     this.constants.html.pagination = ['<ul class="pagination%s">', '</ul>']
     this.constants.html.paginationItem = '<li><a class="page-item%s" aria-label="%s" href="#">%s</a></li>'
     this.constants.html.inputGroup = '<div class="input-group">%s <div class="input-group-button">%s</div></div>'
-    this.constants.html.searchInput = '<input class="%s input-%s input-group-field" type="text" placeholder="%s">'
+    this.constants.html.searchInput = '<input class="%s input-%s input-group-field" type="search" placeholder="%s">'
   }
 
   initToolbar () {