为啥在js取消设置只读标签后iOS不显示键盘输入？

Posted 2023-03-14

【中文标题】为啥在js取消设置只读标签后iOS不显示键盘输入？

【英文标题】：Why is iOS not showing keyboard for input after js has unset a readonly tag?为什么在js取消设置只读标签后iOS不显示键盘输入？

【发布时间】：2019-04-26 13:03:32

【问题描述】：

我将html 表单中的UITextField 设置为只读。在输入时，javascript 应该测试该字段当前是否正在被其他人编辑，如果不是，则 readonly 将设置为 false 并允许编辑该字段。为此，我使用了 onFocus() 事件。

这在 Chrome 和 Firefox 中运行良好，但在 ios 设备上没有显示屏幕键盘。我怀疑即使脚本将其设置为 false，iOS 上的 Safari 浏览器仍会看到只读处于活动状态。

以后必须可以再次将字段设置为只读，因此不能将其从 HTML 中删除。

有没有办法告诉 iOS 即使设置了 readonly 也总是显示键盘，或者这是错误的方法？也许通过 onFocus() 触发它通常是错误的？

javascript部分

function preCheckField(field,form)
    if(field.readOnly)
    // ses = "<?php echo $session['ukey']; ?>";
    // res = getAccessRequest(field.id, form.id, ses);
    // server side check before entry is skipped for this test
    // assuming entry was allowed the readonly must be unset
        field.readOnly = false;
        dev_div = document.getElementById('dev_message');
        message = (field.id+" can now be modified");
        dev_div.innerHTML = dev_div.innerHTML+"<br>"+message;
        field.focus();
    

html部分

    <form action="#edit.1.product.label" 
        id="input.product.label" 
        method="post" 
        name="product.label" 
        class="form-style">
      Label:<br>
      <input id="1.product.label" 
            name="input" 
            type="text" 
            placeholder="label" 
            onFocus="preCheckField(this,this.form)"
            readonly>
    </form><br>
    DEVELOPER OUTPUT:
    <div id="dev_message">
    </div>

【参考方案1】：

为了让 iOS Safari 注册更改后的状态，更改 readOnly 时表单元素不应该已经拥有焦点。

屏幕键盘现在将按预期显示。

function preCheckField(field, form) 
  if (field.readOnly) 
    field.blur(); // iOS needs this before a change of the readOnly
    // ses = "<?php echo $session['ukey']; ?>';
    // res = getAccessRequest(field.id, form.id, ses);
    // server side check before entry is skipped for this test
    // assuming entry was allowed by getAccessRequest readonly can be unset
    field.readOnly = false;
    dev_div = document.getElementById('dev_message');
    message = (field.id + " can now be modified");
    dev_div.innerHTML = dev_div.innerHTML + "<br>" + message;
    field.focus();