Bootstrap TagsInput在Chrome/Edge正常但IE中标签框不显示如何解决

核心问题原因 #

• 你当前使用的bootstrap-tagsinput如果是未做ES5转译的版本，会包含IE不支持的ES6语法（箭头函数、const/let、Array.from等），脚本加载后直接报错中断，无法完成组件渲染。
• 代码中混用了Bootstrap 4专属的布局类row-cols-1、mt-3，而你引入的是Bootstrap 3.3.7版本，这些类在BS3中不存在，会加重IE下的布局异常，但不是组件失效的核心原因。
• bootstrap-tagsinput自带的data-role自动初始化逻辑在IE下存在DOM加载时序问题，DOM未解析完成时脚本执行就会找不到对应输入框，跳过初始化流程。

修复步骤 #

1. 替换bootstrap-tagsinput为官方发布的0.7.1稳定版本，该版本已完成ES5语法转译，兼容IE8及以上版本。
2. 移除输入框上的data-role="tagsinput"属性，改为jQuery DOM加载完成回调内手动初始化组件，避开IE下的自动初始化时序bug。
3. 替换BS3不支持的工具类，补全IE低版本需要的polyfill，修正布局问题。

修复后完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>TNL metadata tagging</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-tagsinput.css">
    <link href="css/styles.css" rel="stylesheet" />
    <!-- 兼容IE9以下版本，本地引入对应资源即可 -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
    <style>
        /* 模拟BS4的mt-3间距效果，适配BS3 */
        .mt-3 {
            margin-top: 15px;
        }
    </style>
</head>
<body>
    <div class="container">
        <form class="form-horizontal">
            <div class="row">
                <div class="col-xs-12 mt-3"><b>Category</b></div>
                <div class="col-xs-12 mt-3">
                    <div class="form-group">
                        <div class="col-sm-10">
                            <input class="form-control" id="focusedInput" type="text" value="News" />
                        </div>
                    </div>
                </div>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
    <!-- jQuery 1.12.4 兼容IE，本地引入即可 -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/bootstrap-tagsinput.js"></script>
    <script type="text/javascript">
    $(function() {
        // DOM加载完成后手动初始化标签输入组件
        $('#focusedInput').tagsinput();
        // 取值逻辑需放在初始化完成后执行
        console.log($("#focusedInput").val());
    });
    </script>
</body>
</html>

效果说明 #

• 修复后组件在IE10、IE11下可正常渲染，默认值News会以标签形式展示，输入内容按回车即可新增标签。
• 移除了BS3不支持的shrink-to-fit=noviewport属性、row-cols-1布局类，IE下布局和Chrome/Edge表现一致。
• 若需兼容IE9及更低版本，本地引入html5shiv、respond.js以及ES5-shim资源即可，不需要修改组件逻辑。

内容的提问来源于stack exchange，提问作者Sudipta Roy