text 相关问题

我的任务是设置一个文本插入符号以显示在 contentEditable div 内的空 span 节点内。以下内容在 Firefox 3.6 上没有任何问题：我的任务是设置一个文本插入符以显示在 contentEditable div 内的空跨度节点内。以下内容在 Firefox 3.6 上没有任何问题： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="js/jquery-1.4.3.min.js"> </script> <style> #multiple { border: 1px solid #ccc; width: 800px; min-height: 20px; padding: 5px; outline: none; } </style> <script> $(document).ready(function(){ var contentEditable = document.getElementById('multiple'); var lastItem = contentEditable.getElementsByTagName('span').item(2); var selectElementText = function(el, win){ win = win || window; var doc = win.document, sel, range; if (win.getSelection && doc.createRange) { range = doc.createRange(); range.selectNodeContents(el); range.collapse(false); sel = win.getSelection(); sel.removeAllRanges(); sel.addRange(range); } else if (doc.body.createTextRange) { range = doc.body.createTextRange(); range.moveToElementText(el); range.select(); } } contentEditable.focus(); selectElementText(lastItem); }); </script> <title>Range Selection Tasks (Make Me Want to Cry)</title> </head> <body> <div id="multiple" contentEditable="true"> <span style="color:red">First</span><span style="color:green">Second</span><span style="color:blue"></span> </div> </body> </html> ...但在 Webkit 和 IE 上，焦点设置为倒数第二跨度。不知道为什么。如果我在最后一个跨度内放置一个空格，它会起作用，但随后我会得到一个字符范围选择。话虽如此，如果插入符号位于最开始，那么最后一个节点中有空格是可以接受的。如有任何帮助，我们将不胜感激。预先感谢您。将元素的 innerHTML 设置为零宽度字符： ('element').innerHTML = '&#200B'; 现在卡雷特可以去那里了。 IE 的选择/范围模型基于文本内容的索引，而不考虑元素边界。我相信在没有文本的内联元素内设置输入焦点可能是不可能的。当然，在您的示例中，我无法通过单击或箭头键将焦点设置在最后一个元素内。如果将每个跨度设置为display: block，它几乎可以工作，尽管仍然存在一些非常奇怪的行为，这取决于父级中是否存在空格。使用浮动、内联块和绝对位置等技巧使显示看起来内联，使 IE 将每个元素视为单独的编辑框。相对定位的块元素彼此相邻可以工作，但这可能不切实际。如果让你感觉好一点的话，IE9终于修复了这个不愉快的地方并采用了标准范围模型。（万岁！）如果插入符号位于最开始，则最后一个节点中有空格是可以接受的。那么，除非 IE 选择专家能想到更好的办法，否则我可能会这样做。（打电话给蒂姆·唐！）我找到了 Webkit 的解决方法，不知道之前是否有人发现过这一点，但是您可以在所需元素的伪选择器之后使用 css3 内容属性执行相同的操作，而不是以编程方式附加零宽度空格插入插入符号。这样做的优点是额外的字符不会显示在 DOM 中，并且用户无法在其中导航插入符号。所以基本上不需要清理。要使其适用于内容可编辑元素的任何子元素，它会是这样的： #mycontenteditableelement *:after { content: '\200B'; } 我没有完全检查，但我怀疑这是一个完整的解决方法。对我来说，将 contenteditable div 的内容设置为 <br> 是有效的。我尝试将其设置为 nbsp; 但这会在我开始编辑之前在 div 中创建额外的字符空间。希望这有帮助。聚会有点晚了，但我使用了 Unicode 零宽度无中断空格 ()。然后，在用户输入发生后调用的事件中，删除零宽度无中断空格。我在使用 Unicode 空间问题时遇到了很多问题，其中大部分是糟糕的用户体验。这可以防止用户知道存在问题。使用 inline-block 对 contenteditable 内的元素应用最小高度和最小宽度可以起到一些的好处，尽管这种影响会产生意想不到的副作用： #multiple * { min-height: 1em; } span, b, strong, i, em, a, etc { display: inline-block; min-width: 1em; background-color: hsla(0, 50%, 50%, .5); /* this is only a visual aid; discard @ will */ vertical-align: middle; /* so elements w/ inline-block align w/ text correctly */ } 您会发现仍然存在问题，但如果您愿意为一小部分其他问题牺牲一些问题，这可能会有一些好处。我偶然发现你可以通过添加 CSS 将光标放置在空的“p”元素中 p { border:1px solid transparent; } 问题是，我不知道为什么会这样！也许有人可以提供一些见解？如果这只是一个奇怪的副作用，可能会有风险。

javascript text cross-browser contenteditable

回答 7 投票 0

如何在react-native中将文本复制到剪贴板？

我想集成一个小文本（我的电子邮件地址），但我希望用户可以复制此文本。我想到一个按钮，当我们点击它时，电子邮件地址将被复制并可以粘贴

javascript react-native button text onclick

回答 7 投票 0

在 VB.NET 中确定文件大小

如何确定文本文件的大小？我知道我可以只计算字符数，但文件将有几 MB 大。

.net vb.net file text

回答 5 投票 0

如何在文本字符串中查找单词，查找特定单词并计算从用户输入中找到每个单词的次数

我研究并找到了PHP字符串字数统计手册。不知道这个功能怎么用？我的目标是匹配字符串中的特定单词并计算它们。我的问题是查看集合之一...