清除带有退格按钮（maxItems = 1）的 selectizeInput 框和 Mozilla Firefox 的问题答案

【问题标题】：Clear selectizeInput box with backspace button (maxItems = 1) and troubles with Mozilla Firefox清除带有退格按钮（maxItems = 1）的 selectizeInput 框和 Mozilla Firefox 的问题
【发布时间】：2020-01-14 02:13:40
【问题描述】：

我有一个带有多个 selectizeInput 小部件的 shinyapp。对于他们中的大多数，用户只能输入一个选项。我的问题：

第一个小问题是我不知道如何在用户选择后保持我的字段活动，因为它在所选的选择是多个时（即仍然使用光标箱内）。如果用户输入一个选项但决定立即使用其键盘上的退格按钮清除它，这将非常有用；
好的，退格键在这种情况下可能不起作用，但在 Mozilla Firefox 上使用这样的闪亮应用时，这是一个重要问题。事实上，如果用户选择了一个选项，然后“本能地”按退格键将其清除，则网页会重新加载，而所有其他选择都将丢失。

下面是我的 shinyapp 中的 selectizeInput 小部件之一的示例：

selectizeInput(inputId = "country_study",
               label = h6("Country"),
               choices = c("China" = "",
                           "China", "India", "Iran"),
               selected = "",
               multiple = FALSE,
               options = list(create = FALSE))

回顾一下，用户只能选择一个选项，但我希望他能够使用键盘上的退格按钮直接删除此选项，而无需通过鼠标。

如果这不可能，我该如何处理 Mozilla Firefox 上的这种奇怪行为？

非常感谢！

【问题讨论】：

标签： r shiny mozilla selectize.js backspace

【解决方案1】：

感谢您可以找到 here 的另一篇 stackoverflow 帖子，我找到了解决方案。

在您的流体页面的开头只需添加：

tags$head(includeScript("disable_backspace.js")),

在您的 App 目录中，使用文本编辑器创建“disable_backspace.js”文件，然后将以下代码粘贴到其中：

$(function(){
/*
 * this swallows backspace keys on any non-input element.
 * stops backspace -> back
 */
var rx = /INPUT|SELECT|TEXTAREA/i;

$(document).bind("keydown keypress", function(e){
    if( e.which == 8 ){ // 8 == backspace
        if(!rx.test(e.target.tagName) || e.target.disabled || e.target.readOnly ){
            e.preventDefault();
        }
    }
}); });

感谢thetoolman 提供此解决方案。

【讨论】：