问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

window.getSelection()在移动端怎么触发

头像
一路梦香
    27044769

    pc端鼠标选中文本过程为按下鼠标=》拖动=》松开鼠标，所以用mouseup就可以很好的得到选中的文本
    下面是一个简单的选中文本加粗效果

     <div id="content" style="background: grey">
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbb
 </div>

$("html").mouseup(function (e) {
    if (window.getSelection()) {
    alert(111)
    var textObj = document.getElementById("content");
    var selectedText = window.getSelection().toString();
    var tempStr1 = textObj.innerText;
    document.getElementById("content").innerHTML = tempStr1.replace(selectedText, "<b>" + selectedText + "</b>")
            }
});

    那么在移动端怎么完成这个过程呢，移动端选中文本要先长安选中，在拖动光标去选文本，我用mouseup和touchend都不能触发事件，求解

    html5javascript
    阅读 4.5k
    1 个回答
    得票最新
    头像
    一路梦香
      27044769

      好吧一天没人回答，只能自救了。
      今早实验出来的方法，目前在pad上工作正常。
      通过监听selectionchange，即当网页上选定的文本发生更改时触发。因为点击其他地方会取消拖蓝，所以通过if保留最后一次拖蓝中的文本在全局变量selectedText中，然后通过点击事件以及replace给文本加粗，高亮同理。

      <body>
    <div id="content">
     aaaaaaaaaaaaabbbbbbbbbccccccccccccc
    </div>
    <button class="btn">点击改变</button>
</body>
<script src="./lib/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
    $(function () {
        var selectedText
        var tempStr1
        var tempStr2
        document.addEventListener("selectionchange", function () {
            if (window.getSelection() != '') {
                var textObj = document.getElementById("content");
                selectedText = window.getSelection().toString();
                tempStr1 = textObj.innerText;
            } else {
                return
            }
        });
        $('.btn').on('click', function () {
            document.getElementById("content").innerHTML = tempStr1.replace(selectedText, "<b>" +
                selectedText + "</b>")
        })
    });
</script>
      查看全部 1 个回答
      推荐问题