Focus With SOFT-KEYBOARD With Bootable Modal

Question

How can I make a soft keyboard using autoload modally with auto focus of the field? It sounds simple, but I can’t do it yet.

Part of the focus works, but not the keyboard.

I am trying to save a user by clicking.

I can use the '.bs.modal shown' and set the focus, but the soft keyboard will not be displayed automatically. The user still needs to reassign the field. How can I make the screen panel fit.

The code I'm playing in now (to a large extent):

this.$container.on('shown.bs.modal', function () { console.log('shown.bs.modal'); setTimeout(function () { var $ctrl = $(jqselector); $ctrl.addClass('active').focus(); }, 500); }); this.$container.modal({ backdrop: (this.config.showModal ? 'static' : true) }) .on('hidden.bs.modal', function () { $(this).remove(); }); 

Focus Question Only

one more question

Edit: Having looked at the bootstrap code several times, it looks like the ad is completely tied to modal management after all processing. I assumed this was happening, and so I added setTimeout, but even with a long delay, no luck. This weekend I will look a little more bot-glancing code.

---

Bounty edit: Bootstrap Code:

  Modal.prototype.show = function (_relatedTarget) { var that = this var e = $.Event('show.bs.modal', { relatedTarget: _relatedTarget }) this.$element.trigger(e) if (this.isShown || e.isDefaultPrevented()) return this.isShown = true this.checkScrollbar() this.$body.addClass('modal-open') this.setScrollbar() this.escape() this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this)) this.backdrop(function () { var transition = $.support.transition && that.$element.hasClass('fade') if (!that.$element.parent().length) { that.$element.appendTo(that.$body) // don't move modals dom position } that.$element .show() .scrollTop(0) if (transition) { that.$element[0].offsetWidth // force reflow } that.$element .addClass('in') .attr('aria-hidden', false) that.enforceFocus() var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget }) transition ? that.$element.find('.modal-dialog') // wait for modal to slide in .one('bsTransitionEnd', function () { that.$element.trigger('focus').trigger(e) }) .emulateTransitionEnd(300) : that.$element.trigger('focus').trigger(e) }) } Modal.prototype.enforceFocus = function () { $(document) .off('focusin.bs.modal') // guard against infinite focus loop .on('focusin.bs.modal', $.proxy(function (e) { if (this.$element[0] !== e.target && !this.$element.has(e.target).length) { this.$element.trigger('focus') } }, this)) } 

I played with the code during the show and showed special modal events. The code looks something like this.

  setTimeout(function (e) { $(':focus').trigger('blur'); $(document).off('focusin.bs.modal'); var $ctrl = $(jqSelect); $ctrl.trigger('focus'); $ctrl.trigger('click'); }, 750); 

Answer 1

I think this is not related to Bootstrap, but with the limitations of auto focus fields on mobile devices. For example, Mobile Safari will allow you to programmatically focus() an element if it is executed synchronously inside the click event handler (see this SO question for more information).

If you really want the keyboard to automatically appear, it might work if you attach to the click / touchhend event instead of bs.modal.show

 var self = this; $('.some-btn-that-triggers-the-modal').on('click', function() { $(jqSelector).addClass('active').focus(); });