jjzjj

javascript - select2标签限制IE浏览器输入字符

coder 2024-05-14 原文

我尝试在网页中使用最新的 select2 v4.0.3 库。我在 this page 上使用了给定的示例用于标记和标记化。 我在不同的浏览器中测试了它。它工作正常,但在 Internet Explorer v.11 中它的行为很奇怪:

我试图添加一个不在选项中的新元素。 输入几个字符后,光标消失了,我无法完成输入的单词。当我单击选择框以重新获得光标时,输入一半的单词消失了。所以输入超过 3-4 个字符似乎是不可能的。我在 select2.github.io/examples 上经历过同样的事情在 IE 中打开时的页面。

<html>
<head>
    <link rel="stylesheet" href="css/select2.css" type="text/css" />
    <script src="js/jquery-2.1.0.js" type="text/javascript"></script>
    <script src="js/select2.full.js" type="text/javascript"></script>
</head>
<body>
    <script type="text/javascript">
    $(document).ready(function() {
        $(".js-example-tokenizer").select2({
          tags: true,
          tokenSeparators: [',', ' ']
        });
    });
    </script>
    <select class="js-example-tokenizer" multiple="multiple" style="width: 600px;">
      <option value="AL">Alabama</option>
      <option value="WY">Wyoming</option>
    </select>
</body>
</html>

在不使用标记的情况下,select2 在 IE 中也能正常工作。但我想使用多选标记控件,用户也可以在其中输入自由文本作为选定选项。

是否有 select2 的变通方法也可以在 IE 中将其用于标记和标记化?

Fiddle example在 IE11 上使用进行测试。

issue on GitHub与问题相关。

最佳答案

这两个类:select2-container--focus select2-container--open当输入元素具有焦点和选项下拉菜单打开时,分别位于输入的容器上。

当我们开始输入时,下拉菜单的打开使输入元素失去了焦点(模糊)。 Select2 需要重新关注元素。事实上,在 Select2 源代码中,我们可以看到更新方法通过重新关注元素来完成:this.$search.focus()。 (check here)。

此代码在大多数浏览器中都可以正常工作,但在 IE v11 中却不行,因为 IE 不会使用此 Select2 源代码重新关注输入。类(class)select2-container--focus消失并且焦点停留在下拉菜单上,这会产生错误。

在较新版本的 Select2 中,他们似乎尝试了修复:check here . 可悲的是,经过测试,它仍然无法正常工作。我在这里看到的唯一解决方案是覆盖 Select2 源代码,直到发布修复程序。否则,您需要使用不存在错误的版本(例如评论中提到的 4.0.2)。

基于 GitHub 问题(特别是这个问题:GitHub issue),解决方案可能是:

JS Fiddle

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<script type="text/javascript">
  // Override update method
  $.fn.select2.amd.require._defined['select2/selection/search'].prototype.update = function(a, b) {
    var c = this.$search[0] == document.activeElement;
    this.$search.attr("placeholder", "");
    a.call(this, b);
    this.$selection.find(".select2-selection__rendered").append(this.$searchContainer);
    this.resizeSearch();
    if (c) {
      var self = this;
      window.setTimeout(function() {
        self.$search.focus();
      }, 0);
    }
  };

  $(document).ready(function() {
    $(".js-example-tokenizer").select2({
      tags: true,
      tokenSeparators: [',', ' ']
    });
  });
</script>
<select class="js-example-tokenizer" multiple="multiple" style="width: 600px;">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>

关于javascript - select2标签限制IE浏览器输入字符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42034740/

有关javascript - select2标签限制IE浏览器输入字符的更多相关文章

  1. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法? - 2

    总的来说,我对ruby​​还比较陌生,我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础,我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  2. Ruby 解析字符串 - 2

    我有一个字符串input="maybe(thisis|thatwas)some((nice|ugly)(day|night)|(strange(weather|time)))"Ruby中解析该字符串的最佳方法是什么?我的意思是脚本应该能够像这样构建句子:maybethisissomeuglynightmaybethatwassomenicenightmaybethiswassomestrangetime等等,你明白了......我应该一个字符一个字符地读取字符串并构建一个带有堆栈的状态机来存储括号值以供以后计算,还是有更好的方法?也许为此目的准备了一个开箱即用的库?

  3. ruby-on-rails - 在 Rails 中将文件大小字符串转换为等效千字节 - 2

    我的目标是转换表单输入,例如“100兆字节”或“1GB”,并将其转换为我可以存储在数据库中的文件大小(以千字节为单位)。目前,我有这个:defquota_convert@regex=/([0-9]+)(.*)s/@sizes=%w{kilobytemegabytegigabyte}m=self.quota.match(@regex)if@sizes.include?m[2]eval("self.quota=#{m[1]}.#{m[2]}")endend这有效,但前提是输入是倍数(“gigabytes”,而不是“gigabyte”)并且由于使用了eval看起来疯狂不安全。所以,功能正常,

  4. ruby-on-rails - unicode 字符串的长度 - 2

    在我的Rails(2.3,Ruby1.8.7)应用程序中,我需要将字符串截断到一定长度。该字符串是unicode,在控制台中运行测试时,例如'א'.length,我意识到返回了双倍长度。我想要一个与编码无关的长度,以便对unicode字符串或latin1编码字符串进行相同的截断。我已经了解了Ruby的大部分unicode资料,但仍然有些一头雾水。应该如何解决这个问题? 最佳答案 Rails有一个返回多字节字符的mb_chars方法。试试unicode_string.mb_chars.slice(0,50)

  5. ruby - 将差异补丁应用于字符串/文件 - 2

    对于具有离线功能的智能手机应用程序,我正在为Xml文件创建单向文本同步。我希望我的服务器将增量/差异(例如GNU差异补丁)发送到目标设备。这是计划:Time=0Server:hasversion_1ofXmlfile(~800kiB)Client:hasversion_1ofXmlfile(~800kiB)Time=1Server:hasversion_1andversion_2ofXmlfile(each~800kiB)computesdeltaoftheseversions(=patch)(~10kiB)sendspatchtoClient(~10kiBtransferred)Cl

  6. ruby-on-rails - Rails 常用字符串(用于通知和错误信息等) - 2

    大约一年前,我决定确保每个包含非唯一文本的Flash通知都将从模块中的方法中获取文本。我这样做的最初原因是为了避免一遍又一遍地输入相同的字符串。如果我想更改措辞,我可以在一个地方轻松完成,而且一遍又一遍地重复同一件事而出现拼写错误的可能性也会降低。我最终得到的是这样的:moduleMessagesdefformat_error_messages(errors)errors.map{|attribute,message|"Error:#{attribute.to_s.titleize}#{message}."}enddeferror_message_could_not_find(obje

  7. ruby - 如何以所有可能的方式将字符串拆分为长度最多为 3 的连续子字符串? - 2

    我试图获取一个长度在1到10之间的字符串,并输出将字符串分解为大小为1、2或3的连续子字符串的所有可能方式。例如:输入:123456将整数分割成单个字符,然后继续查找组合。该代码将返回以下所有数组。[1,2,3,4,5,6][12,3,4,5,6][1,23,4,5,6][1,2,34,5,6][1,2,3,45,6][1,2,3,4,56][12,34,5,6][12,3,45,6][12,3,4,56][1,23,45,6][1,2,34,56][1,23,4,56][12,34,56][123,4,5,6][1,234,5,6][1,2,345,6][1,2,3,456][123

  8. ruby - 什么是填充的 Base64 编码字符串以及如何在 ruby​​ 中生成它们? - 2

    我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%

  9. ruby - 如何使用文字标量样式在 YAML 中转储字符串? - 2

    我有一大串格式化数据(例如JSON),我想使用Psychinruby​​同时保留格式转储到YAML。基本上,我希望JSON使用literalstyle出现在YAML中:---json:|{"page":1,"results":["item","another"],"total_pages":0}但是,当我使用YAML.dump时,它不使用文字样式。我得到这样的东西:---json:!"{\n\"page\":1,\n\"results\":[\n\"item\",\"another\"\n],\n\"total_pages\":0\n}\n"我如何告诉Psych以想要的样式转储标量?解

  10. ruby - 在院子里用@param 标签警告 - 2

    我试图使用yard记录一些Ruby代码,尽管我所做的正是所描述的here或here#@param[Integer]thenumberoftrials(>=0)#@param[Float]successprobabilityineachtrialdefinitialize(n,p)#initialize...end虽然我仍然得到这个奇怪的错误@paramtaghasunknownparametername:the@paramtaghasunknownparametername:success然后生成的html看起来很奇怪。我称yard为:$yarddoc-mmarkdown我做错了什么?

随机推荐