contenteditable

Line break before and after inline contenteditable element in IE

由 半腔热情 提交于 2020-01-16 05:31:13
问题 I need to make inline element contenteditable . It works fine for Chrome/Firefox, but IE (11 at least) inserts line break before and after span if it's contenteditable . Link to fiddle: https://jsfiddle.net/nokpy02g/1/ This is how it looks like in Chrome: And this is IE: Is there is any way to fix it? UPD: My IE version: IE mode on my fiddle page: Also, I am using Windows 7 Professional, 64bit 回答1: Be aware: contentEditable is extremely buggy and inconsistent across all browsers and even

getBoundingClientRect problem with Firefox

由 半城伤御伤魂 提交于 2020-01-13 03:44:27
问题 I am trying to get the y coordinate of the cursor within a contenteditable div using getBoundingClientRect(). The IE branch of the code works, but the other branch (i.e. Firefox 3.5 for my current testing purposes) does not. The code below has the problematic lines marked with *** in the comment. At that point in the code, both selObj and selRange have a value (confirmed in Firebug), but I cannot call getBoundingClientRect() on either of them (gives e.g. selObj.getBoundingClientRect is not a

How to divide the text into separate pages (like Google docs) in contenteditable?

由 徘徊边缘 提交于 2020-01-12 22:20:53
问题 I have been working on the creation of a specialized text editor running in the browser. I've got a question that has put me in a stupor. How to detect and divide long text into separate pages, as is done in Google docs? I know that google docs does not work through contenteditable, but there must be some solution... Edit1: We need to consider a few scenarios: We load a document by means of json object and then rendering our pages. We are typing the text and reached the end of the page. We

How to Remove Resize handles and border of div with contentEditable and size style

由 流过昼夜 提交于 2020-01-11 10:13:07
问题 The problem I'm having is with the contentEditable attribute in IE. The problem is that I'm getting resize handles, and a thick border around elements when they're in focus. The styles for with, height and display are needed. Any idea of how to remove them? CSS or Javascript A simple example: <html> <head> </head> <body> <div contentEditable="true" style="width: 50%; height: 50%; display: table" > <div contentEditable="true" style="width: 50%; height: 50%; display: table-cell"> <p>aaa</p> <

How to Remove Resize handles and border of div with contentEditable and size style

由 拟墨画扇 提交于 2020-01-11 10:12:08
问题 The problem I'm having is with the contentEditable attribute in IE. The problem is that I'm getting resize handles, and a thick border around elements when they're in focus. The styles for with, height and display are needed. Any idea of how to remove them? CSS or Javascript A simple example: <html> <head> </head> <body> <div contentEditable="true" style="width: 50%; height: 50%; display: table" > <div contentEditable="true" style="width: 50%; height: 50%; display: table-cell"> <p>aaa</p> <

selectionStart and selectionEnd in contenteditable element

由 孤街醉人 提交于 2020-01-10 17:26:49
问题 I have been struggling the selectionStart and selectionEnd attributes of textarea to make them work with contenteditable div element. I have checked a lot of related articles on google and on SO but to no avail. I have something similar to the following which is working for textarea perfectly. But I want this one to work with contenteditable div. function replaceVal(node, val, step){ //... var cursorLoc = node.selectionStart; node.value = node.value.substring(0, node.selectionStart - step) +

selectionStart and selectionEnd in contenteditable element

由 雨燕双飞 提交于 2020-01-10 17:25:09
问题 I have been struggling the selectionStart and selectionEnd attributes of textarea to make them work with contenteditable div element. I have checked a lot of related articles on google and on SO but to no avail. I have something similar to the following which is working for textarea perfectly. But I want this one to work with contenteditable div. function replaceVal(node, val, step){ //... var cursorLoc = node.selectionStart; node.value = node.value.substring(0, node.selectionStart - step) +

How to get number of rows in ContentEditable area and current caret line position?

由 心不动则不痛 提交于 2020-01-10 03:58:10
问题 my question has two parts, but they are related. Firstly - I have Contenteditable DIV with some text and I need to get total number of rows (lines) of this DIV. Is it possible ? Secondly - I need to get caret row position, if it is on row number 1, 2, 3, etc.... Can anybody help ? 回答1: The direct answer is that there is no method that actually gets you those numbers. However, there are a number of different work arounds which you can apply to estimate (I use estimate , because I don't think

How to change behavior of contenteditable blocks after on enter pressed in various browsers

由 …衆ロ難τιáo~ 提交于 2020-01-09 04:18:11
问题 When pressing enter in <div contenteditable="true"> </div> in firefox <br /> is produced - that's ok. But in Chrome or IE a new <div> or <p> is created. What should I do to make Chrome and IE behave like Firefox . 回答1: As Douglas said earlier, browsers try to clone previous tag when customer starts a new paragraph on an editable page. The discrepancy occurs when browser has nothing to depart from - e.g. when initially the page body is empty. In this case different browsers behave differently:

How to change behavior of contenteditable blocks after on enter pressed in various browsers

由 允我心安 提交于 2020-01-09 04:18:06
问题 When pressing enter in <div contenteditable="true"> </div> in firefox <br /> is produced - that's ok. But in Chrome or IE a new <div> or <p> is created. What should I do to make Chrome and IE behave like Firefox . 回答1: As Douglas said earlier, browsers try to clone previous tag when customer starts a new paragraph on an editable page. The discrepancy occurs when browser has nothing to depart from - e.g. when initially the page body is empty. In this case different browsers behave differently:
订阅 contenteditable