How to specifically set the caret position in a contenteditable div

I need to set the caret position in a contenteditable div in Chrome which is not focused but I know the caret position ie the character index in the HTML of the div. The div may have other elements inside of it. The best I got so far is setting the caret position either at the end or start of the div domNode.focus(); if (window.getSelection) { var sel = window.getSelection(); //sel.co

如何在contenteditable div中专门设置插入位置

我需要在Chrome浏览器中设置插入符号的位置,但这不是我关注的焦点,但我知道插入符的位置,即div的HTML中的字符索引。 div中可能包含其他元素。 到目前为止,我所得到的最好的结果是将插入符的位置设置在div末尾或开头 domNode.focus(); if (window.getSelection) { var sel = window.getSelection(); //sel.collapseToStart(); //sel.collapseToEnd(); sel.collapse(domNode, caretPos); } 我也尝试

Customizing Contenteditable behavior with javascript

Currently under firefox when I press return in a contenteditable paragraph it inserts a br tag creates a new paragraph tag and then puts a br tag inside that new paragraph. I would like to modify the behavior such that Shift+enter = br tag (this is already the default) Enter duplicates the current element be it p,li,h1..etc and removes any trailing or leading (the W3C specification require s

使用javascript定制Contenteditable行为

目前在firefox下,当我按下一个contenteditable段落中的return时,它会插入一个br标签创建一个新的段落标签,然后在该新段落中放置一个br标签。 我想修改这样的行为 Shift + enter = br标签(这已经是默认) 输入重复的当前元素是它,p,li,h1..etc并删除任何尾随或前导(W3C规范要求我可以使用的一些事件,但我一点都不知道如何实现它们。 元素开始处的退格会将其与前面的同胞进行合并(如果存在) 如果存在,则在元

contenteditable change events

I want to run a function when a user edits the content of a div with contenteditable attribute. What's the equivalent of an onchange event? I'm using jQuery so any solutions that uses jQuery is preferred. Thanks! I'd suggest attaching listeners to key events fired by the editable element, though you need to be aware that keydown and keypress events are fired before the content i

可以理解的变化事件

我想在用户使用contenteditable属性编辑div的内容时运行函数。 什么是onchange事件的等价物? 我使用jQuery,因此任何使用jQuery的解决方案都是首选。 谢谢! 我建议将侦听器附加到由editable元素触发的关键事件,但您需要知道在更改内容本身之前触发keydown和keypress事件。 这不会涵盖更改内容的所有可能方法:用户还可以使用剪辑,复制和粘贴从编辑或上下文浏览器菜单,因此您可能也想要处理cut copy和paste事件。 此

set Cursor / Caret to index

How would I go a about modifying this(How to set caret(cursor) position in contenteditable element (div)?) so it accepts a number index and element and sets the cursor position to that index? For example: If I had the paragraph: <p contenteditable="true">This is a paragraph.</p> And I called: setCaret($(this).get(0), 3) The cursor would move to index 3 like so: Thi|s is a parag

设置Cursor / Caret索引

我如何去修改这个(如何在contenteditable元素(div)中设置插入符号(光标)位置?),因此它接受一个数字索引和元素并将光标位置设置为该索引? 例如:如果我有这个段落: <p contenteditable="true">This is a paragraph.</p> 我打电话给: setCaret($(this).get(0), 3) 光标将移动到索引3,如下所示: Thi|s is a paragraph. 我有这个,但没有运气: function setCaret(contentEditableElement, index)

String conversion to undefined/null/number/boolean

Do you know any better and faster way to convert a string to the type it represents? I've always been using this function: var convertType = function (value){ if (value === "undefined") return undefined; if (value === "null") return null; if (value === "true") return true; if (value === "false") return false; var v = Number (value); return isNaN (v) ? value : v; };

将字符串转换为undefined / null / number / boolean

你知道任何更好更快的方式来将字符串转换为它所表示的类型吗? 我一直在使用这个功能: var convertType = function (value){ if (value === "undefined") return undefined; if (value === "null") return null; if (value === "true") return true; if (value === "false") return false; var v = Number (value); return isNaN (v) ? value : v; }; 候选人: //Me, Gabriel Llamas var cast1 = f

Javascript warning before closing browser not working as expected

I tried the solution based of lots of examples and the event works only if something else is clicked first eg. a link has been first right clicked on the same page. Then if I click the browser close button it prompts a warning before closing as expected. Otherwise if I first go to the page or refresh it and click close button it doesn't work and page closes. The code inside onbeforeunloa

在关闭浏览器之前Javascript警告不按预期工作

我尝试了基于大量示例的解决方案,并且只有在首先点击其他内容的情况下,该事件才有效。 一个链接首先在同一页面上右键单击。 然后,如果我点击浏览器关闭按钮,它会在按照预期结束之前提示警告。 否则,如果我第一次进入页面或刷新页面并单击关闭按钮,它不起作用,页面关闭。 onbeforeunload函数中的代码每次都会触发,但在最后一种情况下显然不起作用。 $("button, a").bind("click", function () { window.onbeforeun

Calling Array.reduce on an array with a single element in Javascript

Calling reduce on an empty array throws TypeError which is perfectly understandable and helps catching bugs. But when I call it on an array with a single item inside, the behavior confuses me: var arr = ["a"]; arr.reduce(function(a,b){ return [a,b] }); //returns "a" I know that reduce is not meant to be used on such an array, but I find that returning just the element without invoking the c

在使用Javascript中的单个元素的数组上调用Array.reduce

调用reduce数组抛出TypeError ,这是完全可以理解的,并有助于捕获错误。 但是当我用一个单独的项目在一个数组上调用它时,行为会让我困惑: var arr = ["a"]; arr.reduce(function(a,b){ return [a,b] }); //returns "a" 我知道reduce并不意味着在这样的数组上使用,但我发现只返回元素而不调用回调或抛出错误至少是奇怪的。 此外,MDN文档指出回调是一个“在数组中的每个值上执行的函数,取四个参数:”。 有人能解释

Are HTMLCollection and NodeList iterables?

In ES6, an iterable is an object that allows for... of , and has a Symbol.iterator key. Arrays are iterables, as are Sets and Maps. The question is: are HTMLCollection and NodeList iterables? Are they supposed to be? MDN documentation seems to suggest a NodeList is an iterable. for...of loops will loop over NodeList objects correctly, in browsers that support for...of (like Firefox 13 and

HTMLCollection和NodeList是否可迭代?

在ES6中,iterable是一个允许for... of的对象,并且有一个Symbol.iterator键。 数组是迭代的,集合和地图也是。 问题是:是HTMLCollection和NodeList迭代? 他们应该是? MDN文档似乎表明NodeList是一个可迭代的。 for...of循环将正确地在NodeList对象上循环,在支持for...of浏览器for...of (如Firefox 13和更高版本) 这似乎证实了Firefox的行为。 我在Chrome和Firefox上都测试了以下代码,并且很惊讶地发现Firefo

javascript cross browser scripting help

I have a tiny function I use to only allow numeric input. It works great in IE, but I cannot get it to work in FireFox or Chrome. I have this js file loaded in my script tag of my HTML page. var numberOnly = function(evt) { var theEvent = evt || window.event; var key = theEvent.keyCode || theEvent.which; key = String.fromCharCode( key ); var regex = /[0-9]|./; if( !regex.test(k

JavaScript跨浏览器脚本帮助

我有一个小功能,我只用数字输入。 它在IE中很好用,但我无法在FireFox或Chrome中使用它。 我将这个js文件加载到我的HTML页面的脚本标记中。 var numberOnly = function(evt) { var theEvent = evt || window.event; var key = theEvent.keyCode || theEvent.which; key = String.fromCharCode( key ); var regex = /[0-9]|./; if( !regex.test(key) ) { theEvent.returnValue = false; } }; var w

Regex to replace multiple spaces with a single space

Given a string like: "The dog has a long tail, and it is RED!" What kind of jQuery or JavaScript magic can be used to keep spaces to only one space max? Goal: "The dog has a long tail, and it is RED!" Given that you also want to cover tabs, newlines, etc, just replace ss+ with ' ' : string = string.replace(/ss+/g, ' '); If you really want to cover only spaces (and thus no

正则表达式用一个空格替换多个空格

给定一个字符串如: "The dog has a long tail, and it is RED!" 什么样的jQuery或JavaScript的魔术可以用来保持空间只有一个空间最大? 目标: "The dog has a long tail, and it is RED!" 鉴于你也想要覆盖制表符,换行符等,只需用ss+ ' '替换ss+ : string = string.replace(/ss+/g, ' '); 如果你真的只想覆盖空格(不包括制表符,换行符等),那么这样做: string = string.replace(/ +/g, ' ');