首页 > 解决方案 > 是否可以在单击移动视图的按钮时显示键盘

问题描述

在 MVC 应用程序中,我有一个要求,即每当单击与字段关联的文本框时

  1. 应隐藏移动视图的键盘弹出窗口
  2. 应该显示一个小按钮
  3. 单击此按钮后,应显示键盘。

这种要求背后的原因是我们有一个硬件设备可以将值直接传输到文本框,所以键盘应该被隐藏,当需要修改这个硬件发送的值时,用户可以点击按钮,然后键盘弹出值可以修改。

我已经达到了第 1 点和第 2 点,请帮助我达到第 3 点(如果可能的话)

下面是我的 .cshtml 文件的代码片段:

文本框:

<div class="col-md-6">
     <input type="number" value="" name="FeatureList" id=@textBoxId maxlength="13" class="form-control-new  " />
</div>

键盘显示/隐藏按钮:

<div>
    <br />
    <button type="button" id="btnKeyboard"> Keyboard </button>
</div>

文本框点击事件:

<script>
    $(document).ready(function () {
        $(this).on('click', "#dynamicControls input[type='text']", function () {
            debugger;
               $("#btnKeyboard").hide(); 

        });
    });
</script>

标签: c#asp.net-mvc

解决方案


您可以禁用文本框并仅在用户单击按钮时启用它,以便移动设备显示键盘。

$(document).ready(function () {
        $(this).on('click', "#btnKeyboard", function () {
            debugger;
               $('input').prop( "disabled", false ); 
               $('input').focus();
        });
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6">
     <input type="number" value="" name="FeatureList" id=@textBoxId maxlength="13" class="form-control-new" disabled />
</div>


Keyboard show/hide button : 

<div>
    <br />
    <button type="button" id="btnKeyboard"> Keyboard </button>
</div>


推荐阅读