相关疑难解决方法(0)

禁用输入"文本"标签中的自动缩放 - iPhone上的Safari

我制作了一个带有<input>标签的HTML页面type="text".当我在iPhone上使用Safari点击它时,页面变大(自动缩放).有人知道如何禁用它吗?

html iphone zoom html-input mobile-safari

479
推荐指数
24
解决办法
38万
查看次数

移动Safari自动对焦文本字段

在Mobile Safari中,在设置延迟时间后,我无法将注意力集中在文本字段上.我附上一些展示问题的示例代码.如果单击该按钮,则触发.focus(),一切都按预期工作.如果你把焦点放在回调上,比如setTimeout函数,那么它只能在移动safari中失败.在所有其他浏览器中,有一个延迟,然后焦点发生.

令人困惑的是,即使在移动游猎中,也会触发"focusin"事件.这个(和SO中的〜类似〜评论)让我觉得它是一个移动的safari bug.任何指导都将被接受.

我已经在模拟器和iPhone 3GS/4 iOS4上进行了测试.

示例HTML:

<!DOCTYPE html> 
  <html lang='en'> 
    <head> 
      <title>Autofocus tests</title> 
      <meta content='width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0' name='viewport'> 
      <meta content='yes' name='apple-mobile-web-app-capable'> 
    </head> 
    <body>
      <h1> 
        Show keyboard without user focus and select text:
      </h1> 
      <p> 
        <button id='focus-test-button'> 
          Should focus on input when you click me after .5 second
        </button> 
        <input id='focus-test-input' type='number' value='20'> 
      </p> 
      <script type="text/javascript"> 
        //<![CDATA[
        var button = document.getElementById('focus-test-button');
        var input  = document.getElementById('focus-test-input');

        input.addEventListener('focusin', function(event) {
          console.log('focus');
          console.log(event);
        });

        button.addEventListener('click', function() {
          // *** If …
Run Code Online (Sandbox Code Playgroud)

javascript focus mobile-safari autofocus

55
推荐指数
2
解决办法
7万
查看次数

iOS - 手动关注输入/文本区域的解决方法

所以我已经看到很多关于iOS问题的线索,专注于输入/ textarea元素.(看这里这里)似乎iOS不会让你手动专注于其中一个元素,并要求它是一个真正的点击/点击以专注于元素.

我已经尝试模拟点击,触发点击,只需点击()直接点击...各种各样的事情.

以下是我目前正在尝试实施的解决方法:

$scope.gotoElement = function(eID) {
    // call $anchorScroll()
    $scope.smoothScrollTo(eID).then(function() {
        clickElement('#textarea');
    });          
}

function clickElement(e) {
  $(e).on('touchstart', function() {
    //$(e).val('touchstart');
    $(e).focus();
  });

  $(e).trigger('touchstart');
}
Run Code Online (Sandbox Code Playgroud)

你不需要担心滚动功能,我知道这有效,我已经测试了足够的.注释掉的$(e).val('touchstart')工作没有问题来改变textarea的文本,但是.focus()在iOS上不起作用.我已经在Android设备上测试了它,它工作正常,但在iOS上它只是没有调出键盘.有时它会开始调高键盘半秒钟然后再次消失.

我已经看过上面提到的其他线程了,我似乎无法弄清楚如何为此编写解决方法.

有任何想法吗?

javascript jquery ios

42
推荐指数
3
解决办法
2万
查看次数

以编程方式关注移动野生动物园中的下一个输入字段

我有几个输入字段,就像一个填字游戏答案行:

在此输入图像描述

每个方块都有自己的输入字段.其中的原因是有时可以预先填充正方形.现在,在桌面浏览器上,只要输入字符,光标就会跳转到下一个输入字段.使用类似的东西很有效:

$(this).next('input').focus();
Run Code Online (Sandbox Code Playgroud)

但是移动safari(我们在ios上测试)的问题是我不知道如何以编程方式自动"跳转"到下一个输入字段.用户可以通过"下一步"按钮完成,但有没有办法自动执行此操作?

我知道focus()触发器对ios有一些限制,但我也看到了使用合成点击等的一些解决方法.

javascript jquery focus mobile-safari ios

30
推荐指数
2
解决办法
6万
查看次数

如何以编程方式将文本输入集中在iOS中,来自select标记的可信onchange事件?

我在下面准备了一个简单的片段,一个文本输入字段,一个按钮和一个选择.单击按钮以编程方式聚焦输入.更改选择也会聚焦输入.在所有桌面浏览器和Android中都是如此,但在iOS中则不然.在iOS中,聚焦适用于按钮,但不适用于选择.

var mySelect = document.getElementById('mySelect');
var myButton = document.getElementById('myButton');
var myTextInput = document.getElementById('myTextInput');

mySelect.addEventListener('change', function(changeEvent) {
  console.log('Change event trusted: ' + changeEvent.isTrusted);
  myTextInput.focus();
});

myButton.addEventListener('click', function(clickEvent) {
  console.log('Click event trusted: ' + clickEvent.isTrusted);
  myTextInput.focus();
});
Run Code Online (Sandbox Code Playgroud)
<select id="mySelect">
  <option value="0">Option 1</option>
  <option value="1">Option 2</option>
</select>
<button id="myButton">Focus through onclick</button>
<input id="myTextInput" type="text" />
Run Code Online (Sandbox Code Playgroud)

似乎iOS有一些本机安全保护行为来阻止可写输入的程序化焦点,以防止恼人的键盘弹出窗口.此安全措施仅拒绝某些时刻未由真实用户交互启动的事件.

根据规范定义,用户启动的事件是受信任的事件: 规范条目

isTrusted属性必须返回初始化的值.创建事件时,必须将属性初始化为false.

isTrusted是一种便利,它指示用户代理是否调度事件(而不是使用dispatchEvent()).唯一的遗留异常是click(),这会导致用户代理将isTrusted属性初始化为false的事件分派.

您可以通过我的console.log陈述看到两者clickchange事件都具有其isTrusted属性true,但后者被iOS阻止.

我已经搜索了很多,但未能找到描述此iOS行为的声明.

有人对这个有了解吗?是否有工作来获得一个<select>改变事件,以成功集中输入并使键盘上升?

我已经尝试了很多方法,与大多的工作click,mouseupmousedown …

html javascript ios

9
推荐指数
1
解决办法
1815
查看次数

安装上的自动对焦输入(Vue)- iOS

我想在 Vue 组件出现时触发输入框聚焦(从而弹出键盘)。

它不工作iOS

我尝试使用 Vue 的示例指令(这里)和 HTML5,autoFocus但都没有奏效。

我在沙箱 ( https://codesandbox.io/s/lw321wqkm ) 中创建了这个示例。

FWIW,我不相信这是一个 JS 限制,因为我已经看到了示例工作(例如使用 React Native Web autoFocus-请参阅示例

父组件

<template>
<div>
  <TextComp v-if='showText' />
  <button @click='showText = !showText'> Show/hide input </button>
</div>

</template>
 ...
Run Code Online (Sandbox Code Playgroud)

子组件

<template>
<div>
   <input ref='focusMe' type='text'/>
</div>

</template>

<script>

export default {
  name: 'TextComp',
  mounted () {
    this.$refs.focusMe.focus()
  }
}

</script>
Run Code Online (Sandbox Code Playgroud)

javascript keyboard vue.js

6
推荐指数
1
解决办法
7971
查看次数

使用SOFT-KEYBOARD与自举模式对焦

当自动聚焦场时,如何使软键盘提供自举模式? 这听起来很容易,但我还是无法做到.

焦点部分可以工作,但不是键盘.

我试图保存用户点击.

我可以利用'shown.bs.modal'并设置焦点,但软键盘不会自动显示.用户仍然需要重新占用该字段.如何强制软键盘出现.

我正在玩的代码(非常):

        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();
        });
Run Code Online (Sandbox Code Playgroud)

SE问题只关注焦点

另一个问题

编辑:稍微查看一下bootstrap代码后,看起来广告在所有处理后都会关注模态控件.我假设这样的事情正在发生,这就是为什么我添加了setTimeout,但即使有很大的延迟,也没有运气.我将在本周末更仔细地研究一下bootsrap代码


赏金编辑:Bootstrap代码:

  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 = …
Run Code Online (Sandbox Code Playgroud)

javascript mobile soft-keyboard twitter-bootstrap

5
推荐指数
1
解决办法
1489
查看次数