1. I noticed the OnClientSelectionChange function is only called the first time you tap in the content area on iOS. Subsequent taps do not cause the OnClientSelectionChange function to execute.
2. I noticed a second issue when ContentAreaMode=iFrame. Subsequent taps do not move the cursor to the tap position unless I tap and hold the position. If I just tap, the iOS "Select | Select All | Paste" menu pops up and the cursor remains in the current position. I see the same behavior in Safari and Chrome. iOS version 7.1.
I'm using version 2014.1.403.45 of the editor.
Please advise.
Trevor.
2. I noticed a second issue when ContentAreaMode=iFrame. Subsequent taps do not move the cursor to the tap position unless I tap and hold the position. If I just tap, the iOS "Select | Select All | Paste" menu pops up and the cursor remains in the current position. I see the same behavior in Safari and Chrome. iOS version 7.1.
I'm using version 2014.1.403.45 of the editor.
Please advise.
Trevor.
5 Answers, 1 is accepted
0
Trevor
Top achievements
Rank 1
Rank 1
answered on 07 May 2014, 05:17 PM
These are major issues for our customers. Can I please get some assistance in resolving them?
0
Hi Trevor,
On my end I am unable to reproduce the described issue. The selection change event is raised every time as expected using the following markup in a simple project:
About the iOS menu, note that it is a native browser feature and due to the complexity of the mobile device events I am unable to provide a possible approach to disable it and cancel its appearance.
I suggest contacting us via proper support ticket and providing more details and configuration samples, so that we could further investigate and assist you about the certain scenarios under iOS mobile devices.
Regards,
Ianko
Telerik
On my end I am unable to reproduce the described issue. The selection change event is raised every time as expected using the following markup in a simple project:
<telerik:RadEditor runat="server" ID="RadEditor1" OnClientSelectionChange="OnClientSelectionChange"> <Content> some text </Content></telerik:RadEditor><script type="text/javascript"> function OnClientSelectionChange(editor, args) { alert("Selection Change"); }</script>About the iOS menu, note that it is a native browser feature and due to the complexity of the mobile device events I am unable to provide a possible approach to disable it and cancel its appearance.
I suggest contacting us via proper support ticket and providing more details and configuration samples, so that we could further investigate and assist you about the certain scenarios under iOS mobile devices.
Regards,
Ianko
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
0
Trevor
Top achievements
Rank 1
Rank 1
answered on 08 May 2014, 05:54 PM
I have spent time to prepare two sample projects to demonstrate the two separate issues:
Issue 1: iOS. OnClientSelectionChange only fires the first time you tap in the content area. Subsequent taps do not fire. ContentAreaMode=Div.
ASPX:
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="TelerikTest.aspx.vb" Inherits="IronPoint.TelerikTest" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<html>
<body>
<form runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<h2>OnClientSelectionChange only fires when first tapping into the content area</h2>
<h2>iOS - ContentAreaMode=Div - editor version 2014.1.403.45</h2>
<b>tap in the content area, then tap other spots in the content area</b>
<telerik:RadEditor runat="server" ID="RadEditor1" OnClientSelectionChange="OnClientSelectionChange" ContentAreaMode="Div">
<Content>
<p>this is line one</p>
<p>this is line two</p>
<p>this is line three</p>
<p>this is line four</p>
</Content>
</telerik:RadEditor>
<div id="divMessage"></div>
</form>
<script type="text/javascript">
function OnClientSelectionChange(editor, args) {
document.getElementById('divMessage').innerHTML+='selection change...';
alert('selection change');
}
</script>
</body>
</html>
Issue 2: iOS. Tapping in the content area does not move the cursor. ContentAreaMode=iFrame.
ASPX:
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="TelerikTest.aspx.vb" Inherits="IronPoint.TelerikTest" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<html>
<body>
<form runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<h2>Cursor does not move on iOS - ContentAreaMode=iFrame</h2>
<h2>editor version 2014.1.403.45</h2>
<b>tap in the content area, then tap other spots within the content area</b>
<telerik:RadEditor runat="server" ID="RadEditor1" >
<Content>
<p>this is line one</p>
<p>this is line two</p>
<p>this is line three</p>
<p>this is line four</p>
</Content>
</telerik:RadEditor>
<div id="divMessage"></div>
</form>
</body>
</html>
Again, these are critical issues. Please provide a solution. Thanks,
Trevor.
Issue 1: iOS. OnClientSelectionChange only fires the first time you tap in the content area. Subsequent taps do not fire. ContentAreaMode=Div.
ASPX:
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="TelerikTest.aspx.vb" Inherits="IronPoint.TelerikTest" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<html>
<body>
<form runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<h2>OnClientSelectionChange only fires when first tapping into the content area</h2>
<h2>iOS - ContentAreaMode=Div - editor version 2014.1.403.45</h2>
<b>tap in the content area, then tap other spots in the content area</b>
<telerik:RadEditor runat="server" ID="RadEditor1" OnClientSelectionChange="OnClientSelectionChange" ContentAreaMode="Div">
<Content>
<p>this is line one</p>
<p>this is line two</p>
<p>this is line three</p>
<p>this is line four</p>
</Content>
</telerik:RadEditor>
<div id="divMessage"></div>
</form>
<script type="text/javascript">
function OnClientSelectionChange(editor, args) {
document.getElementById('divMessage').innerHTML+='selection change...';
alert('selection change');
}
</script>
</body>
</html>
Issue 2: iOS. Tapping in the content area does not move the cursor. ContentAreaMode=iFrame.
ASPX:
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="TelerikTest.aspx.vb" Inherits="IronPoint.TelerikTest" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<html>
<body>
<form runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<h2>Cursor does not move on iOS - ContentAreaMode=iFrame</h2>
<h2>editor version 2014.1.403.45</h2>
<b>tap in the content area, then tap other spots within the content area</b>
<telerik:RadEditor runat="server" ID="RadEditor1" >
<Content>
<p>this is line one</p>
<p>this is line two</p>
<p>this is line three</p>
<p>this is line four</p>
</Content>
</telerik:RadEditor>
<div id="divMessage"></div>
</form>
</body>
</html>
Again, these are critical issues. Please provide a solution. Thanks,
Trevor.
0
Trevor
Top achievements
Rank 1
Rank 1
answered on 09 May 2014, 02:34 PM
UPDATE:
further investigation into issue 2 shows that the content above the editor (in this case, the H2 and B elements) has some effect on this issue. If I remove those elements above the editor, there is a noticeable difference in how the editor responds to taps. It still does not respond correctly, but it responds differently.
Again, please provide a solution to this problem. Thanks.
further investigation into issue 2 shows that the content above the editor (in this case, the H2 and B elements) has some effect on this issue. If I remove those elements above the editor, there is a noticeable difference in how the editor responds to taps. It still does not respond correctly, but it responds differently.
Again, please provide a solution to this problem. Thanks.
0
Hello Trevor,
Thank you for getting back to me with the provided samples.
When the div mode is set the RadEditor is placing a simple content editable div element. Its event raise matter is entirely controlled by the browser and it appears that under mobile devices there are some complications.
When a simple JS onclick event is attached to such HTML element, you can see that the same result appears. After the first raise, no additional click handler is invoked.
Example:
Due to that I am unable to confirm that this is a bug of the RadEditor. By this investigation I can determine that this is a browser behavior, although I will log this for further investigation by our dev team. Due to the complexity of this matter I am unable to provide a possible resolution for this.
The second issue, as mentioned in my first message stems due to the native events of the editable iFrame, which cannot be bypassed easily. After some further researching I found that the best way to replace the cursor position is by holding the tap. It appears that under iOS touch devices the cursor in native editable elements can be easily located by holding and sliding to the desired location.
Regards,
Ianko
Telerik
Thank you for getting back to me with the provided samples.
When the div mode is set the RadEditor is placing a simple content editable div element. Its event raise matter is entirely controlled by the browser and it appears that under mobile devices there are some complications.
When a simple JS onclick event is attached to such HTML element, you can see that the same result appears. After the first raise, no additional click handler is invoked.
Example:
<div contenteditable="true" style="width:600px; height:400px; border:1px solid red;" onclick="alert('click')"> <p>this is line one</p> <p>this is line two</p> <p>this is line three</p> <p>this is line four</p></div>Due to that I am unable to confirm that this is a bug of the RadEditor. By this investigation I can determine that this is a browser behavior, although I will log this for further investigation by our dev team. Due to the complexity of this matter I am unable to provide a possible resolution for this.
The second issue, as mentioned in my first message stems due to the native events of the editable iFrame, which cannot be bypassed easily. After some further researching I found that the best way to replace the cursor position is by holding the tap. It appears that under iOS touch devices the cursor in native editable elements can be easily located by holding and sliding to the desired location.
Regards,
Ianko
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.