相关疑难解决方法(0)

Web应用程序如何检测粘贴事件并检索要粘贴的数据？

我想在将文本粘贴到富文本编辑器之前删除HTML内容.

之后粘贴后清理文本有效,但问题是所有以前的格式都丢失了.例如,我可以在编辑器中编写一个句子并将其设为粗体,但是当我粘贴新文本时,所有格式都会丢失.我想只清理粘贴的文本,并保持以前的格式不变.

理想情况下,该解决方案应适用于所有现代浏览器(例如,MSIE,Gecko,Chrome和Safari).

请注意,MSIE有clipboardData.getData(),但我找不到其他浏览器的类似功能.

Chrome中的输出:

<div id="content" contenteditable="true" style="border:1px solid #000;width:500px;height:40px;">
    hey
    <div>what's up?</div>
<div>
<button id="insert_caret"></button>

我相信FF看起来像这样:

hey
<br />
what's up?

在IE中:

hey
<p>what's up?</p>

不幸的是,没有很好的方法来制作它,以便每个浏览器插入一个<br />而不是div或p-tag,或者至少我在网上找不到任何东西.

无论如何,我现在要做的是,当我按下按钮时,我希望将插入符号设置在文本的末尾,所以它应该看起来像这样:

hey
what's up?|

任何方式这样做,所以它适用于所有浏览器？

例:

$(document).ready(function()
{
    $('#insert_caret').click(function()
    {
        var ele = $('#content');
        var length = ele.html().length;

        ele.focus();

        //set caret -> end pos
     }
 }

我需要contenteditable像在Gmail备注小部件上一样将插入符移动到节点的末尾.

我在StackOverflow上读取了线程,但这些解决方案基于使用输入,它们不适用于contenteditable元素.

问题的旧版本如下,在研究了更多之后,我决定重新解释这个问题.像以前一样的问题是,我需要在没有突出显示文本的情况下关注一个可信的div,直接进行焦点突出显示Chrome中的文本.

我意识到人们通过重置textarea中的插入位置来解决textareas中的这个问题.我怎么能用一个满足的元素来做到这一点？我试过的所有插件只适用于textareas.谢谢.

问题的老措辞:

我有一个我想要关注的可满足的元素,但只是将光标放在元素的前面,而是选择所有内容.

elem.trigger('focus');使用jquery选择chrome中整个元素中的所有文本.Firefox行为正确,将插入符号设置在文本的前面.我怎样才能让Chrome按照我想要的方式行事,或者重点关注的可能不是我想要的.

谢谢大家.

我试图让用户将图像粘贴到div.问题是我需要它在Firefox中工作.

根据我的阅读,自版本13以来的Firefox(我认为)不允许JavaScript访问剪贴板,并且event.clipboard不存在于剪贴板中.我知道它可以做到,因为Gmail和雅虎甚至在Firefox中也是如此.

我只是希望它无论如何都可以工作,使用jQuery,JavaScript,HTML5,只要它在最新的Firefox中工作就没关系.(虽然没有Flash).

我有一个令人满意的div,我希望能够让用户插入链接,图像或YouTube视频等内容.目前这就是我所拥有的:

function addLink() {
  var link = $('#url').val();
  $('#editor').focus();
  document.execCommand('createLink', false, link);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Text Editor -->
<div id="editor" contenteditable="true"></div>

<!-- Add Link -->
<input type="text" id="url">
<button onclick="addLink()">Submit</button>

如您所见,用户必须输入单独的文本框才能输入链接地址.因此,当链接添加到编辑器时,它不会添加到指针/插入符所在的位置.

我的问题是如何获取和设置指针/插入符的位置.我已经看到了其他问题,例如设置指针,但是我希望有一个在所有现代浏览器中都支持的解决方案,包括Chrome,Safari,Firefox和IE9 +.

有任何想法吗？谢谢.

编辑:

我发现下面的代码获取位置,但它只根据它所在的行获取位置.例如,如果我有这个(|光标在哪里):

This is some text
And som|e more text

然后我将返回值7,而不是24.

function getPosition() {
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt) {
            return sel.getRangeAt(0).startOffset;
        }
    }
    return null;
}

有像这样的HTML:

<div contenteditable="true" class="value research-form thumbnail">
 Some text here
 </div>

div的内容应该动态地突出显示某些单词,而用户类型例如:

 <div contenteditable="true" class="value research-form thumbnail">
 Some text here <span style="background-color: yellow">highlight</div> it
 </div>
 <script>
    $(document).ready(function () {
        var input = $('#textarea').on('input', function (event) {
            var newText = input.text().replace('highlight', '<span style="background-color: yellow">highlight</div>');
            input.html($.parseHTML(newText));
        });
    });
</script>

但是有一个问题:当我在div光标中刷新文本时,在输入文本的开头移动.

有没有办法在更改contenteditable值后恢复光标位置？或者也许有其他方法可以获得相同的效果？

我希望将插入符号正好位于其当前位置前方四个位置,以便我可以正确插入一个标签.我已经在插入符号的位置处获得了HTML插入,但是当我插入HTML时,插入符号被遗忘.我花了大约一个小时左右的时间看各种方法来做这件事,我已经尝试了很多,但我不能让他们中的任何一个为我工作.这是我尝试过的最新方法:

function moveCaret(input, distance) {
    if(input.setSelectionRange) {
        input.focus();
        input.setSelectionRange(distance, distance);
    } else if(input.createTextRange) {
        var range = input.createTextRange();
        range.collapse(true);
        range.moveEnd(distance);
        range.moveStart(distance);
        range.select();
    }
}

它绝对没有 - 不移动插入符,抛出任何错误或任何东西.这让我感到困惑.是的,我知道上面的方法集(应该)将插入符号从指定节点的开头(即input)开始设置在某个位置,但即使这样也不起作用.那么,我究竟做错了什么,我该怎么做呢？

编辑:基于ov提供的链接,我已经设法将一些东西拼凑在一起,最终做了一些事情:抛出一个错误.好极了!这是新代码:

this.moveCaret = function(distance) {
    if(that.win.getSelection) {
        var range = that.win.getSelection().getRangeAt(0);
        range.setStart(range.startOffset + distance);
    } else if (that.win.document.selection) {
        var range = that.win.document.selection.createRange();
        range.setStart(range.startOffset + distance);
    }
}

现在,这给出了错误Uncaught Error: NOT_FOUND_ERR: DOM Exception 8.有什么想法吗？

我试图取代的任何实例/any thing in here/与<b>/any thing in here/</b>上飞,因为变化在CONTENTEDITABLE DIV制作.

我当前的实现工作正常,但是在每个按键时,插入符被移动到div的开头,使得实现无法使用.在替换div的内容时是否有某种方法可以保持插入位置？

$('.writer').on('keyup', function(e) {
     $(this).html($(this).html().replace(/\/(.*)\//g, '<b>\/$1\/<\/b>'));
});

我想聚焦 contenteditable div，这样我就可以在插入 DOM 时自动开始输入

我试过了$('.content').focus()，但这不起作用

示例 html：

<div class="content" contenteditable="true">sample input</div>

这是完整的页面：

<html>
<head>
<title>Test</title>
<style type="text/css">
  .edit { border: 1px solid blue; font-size: 20pt }
</style>
<script type="text/javascript">
  function clean(id) {
    setTimeout('clean2("'+id+'")', 1)
  }
  function clean2(id) {
    el=document.getElementById(id)
    off=window.getSelection().anchorOffset
    el.innerHTML = el.innerHTML.replace(/(<([^>]+)>)/ig,""); 
    el.innerHTML = el.innerHTML.replace(/([0-9])/ig,"<font color='red'>$1</font>");
    return false;
  }
</script>
</head>

<body onload="document.getElementsByClassName('edit')[0].focus()">

<h1>Type in here</h1>
<div id="e1" class="edit" contentEditable="true" onkeyup="clean('e1')"></div>

</body>
</html>

这里的目标是用红色突出显示所有数字。（将来我实际上会使用更复杂的着色规则）。目前这种颜色替换正在发生，但是一旦您向框中添加一个数字，焦点就会丢失。

任何提示？（使用 Chorme 开发）

我有一个内容可编辑的div,我希望点击编辑按钮,光标出现在div的开头,在它结束时出现的那一刻.

<li style="display: list-item;" class="menu-item" contenteditable="true">
<div class="">Dior<input type="checkbox" name="selected"></div>
<ol class="">
    <li style="display: list-item;" class="menu-item">
    <div class=""><a href="/portfolios/charlize-theron" class="" name="">Charlize-Theron</a>
    <input type="checkbox" name="selected"></div>
    </li>
    <li style="display: list-item;" class="menu-item">
    <div class=""><a href="/portfolios/natalie-portman" class="" name="">Natalie-Portman</a>
    <input type="checkbox" name="selected"></div>
    </li>
    <li style="display: list-item;" class="">
    <div class=""><a href="/portfolios/sharon-stone-1" class="" name="">Sharon-Stone</a>
    <input type="checkbox" name="selected"></div>
    </li>
</ol>
<a href="#" class="edit" style="opacity: 1; ">Edit</a></li>

因此,当您在分钟点击编辑时,您必须使用箭头键返回到开始编辑Dior(这是唯一真正被编辑的东西).但我试图将内容可编辑的代码添加到div只有它不起作用.

这是我的一些jQuery

$(".edit").click(function(){
            $(this).parent().children("div").focus(function(){

            });
        });

        $(".edit").hover(function(){
            $(this).css("opacity","0.5")
        }, function(){
            $(this).css("opacity","1")
        });

        $(".edit").parent().blur(function(){
            var sortableList = $(".sortable").html();
            $("#ItemDescription").val(sortableList);
        });

function storeUserScribble(id) { …