JS获取输入内容匹配页面关键字,并修改样式


<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../../css/mui.min.css" rel="stylesheet" />
</head>
<body>
    <div id="content">
        <span>哈</span></br>
        <span>哈哈2</span></br>
        <span>哈哈哈3</span></br>
        <span>哈哈哈哈4</span></br>
        <span>哈哈哈哈哈5</span></br>
    </div>
    <button id="confirmBtn">按钮</button>
    <script src="../../js/mui.min.js"></script>
    <script src="../../js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        mui.init();
        document.getElementById("confirmBtn").addEventListener('tap', function(e) {
            e.detail.gesture.preventDefault(); //修复iOS 8.x平台存在的bug,使用plus.nativeUI.prompt会造成输入法闪一下又没了
            var btnArray = ['取消', '确定'];
            mui.prompt('测试测试:', '性能好', '', btnArray, function(e) {
                if(e.index == 1) {
                    var input = e.value; //输入框的值
                    var old = $('#content').html(); //整个外层容器
                    $('#content').html(old.replace(input, "<span style='color:red;'>" + input + "</span>")); //替换并修改样式
                } else {
                    info.innerText = '你点了取消按钮';
                }
            })
        });
    </script>
</body>


这里写图片描述

猜你喜欢

转载自blog.csdn.net/Mr__Fu/article/details/82454977