locked
Page Up / Page Down within a Webview

    Question

  • I've got a WebView in my app which contains a contentEditable div. If I press Page Down while working on the document the cursor jumps to the very end of the doc, rather than moving down one page. 

    I've come up with a workaround which involves trapping the keydown event in javascript and using it to scroll the page a single screen height down, but this leaves my cursor where it was. If I then press the arrow keys to move the cursor the page springs right back up to where it was. 

    I'm looking for either 

    A) a way to fix the behaviour of Page Up / Page Down in the WebView so it works as normal

    B) a way to place the cursor at a set of X,Y coordinates within a contentEditable div. If I can do that I can record the cursor pos and place it where it should be afterward. 

    C) a way to paste HTML content into a fixed height div and truncate anything which does not fit. From that I can determine the length of the text up to the new cursor position and place the cursor approximately where it would be with standard page down behaviour

    Friday, August 15, 2014 9:13 AM

Answers

  • StackOverflow answered my query. It turns out it was as simple as setting a height and overflow-y: scroll on the div. That's all!

    Standard Page Up / Down behaviour is back working as intended. 


    • Marked as answer by Roryok Wednesday, August 27, 2014 9:24 AM
    Wednesday, August 27, 2014 9:24 AM

All replies

  • Hi Roryok,

    >A) a way to fix the behaviour of Page Up / Page Down in the WebView so it works as normal

    I tests the app using the following project. http://code.msdn.microsoft.com/XAML-WebView-control-sample-58ad63f7. It seems that the app works as expected as in IE. Did you try you app in another computer?

    > B) a way to place the cursor at a set of X,Y coordinates within a contentEditable div. If I can do that I can record the cursor pos and place it where it should be afterward.

    Per my understanding, WebView control in windows phone is not a general-purpose browser. It is used to display content. You can try to inject javascript into a WebView page. see how to from http://blogs.msdn.com/b/wsdevsol/archive/2012/10/18/nine-things-you-need-to-know-about-webview.aspx#AN6.

    > C) a way to paste HTML content into a fixed height div and truncate anything which does not fit. From that I can determine the length of the text up to the new cursor position and place the cursor approximately where it would be with standard page down behavior

    As I know, there are some tools which can extract content from html page. See the following link for details. http://developer.nokia.com/community/wiki/HTML_Page_parsing_using_HTMLAgilityPack.

    Hope these useful.

    Regards,


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Monday, August 18, 2014 8:28 AM
    Moderator
  • Thanks. I'm writing a Windows STORE App though, not a Windows Phone app. The answers to B and C only relate to Windows Phone. 

    I'll try the sample from A and see if it works. 

    EDIT: I tried the first sample, it said it was incompatible with the version of Visual Studio I have (2013). I'm trying a simple app using the same code...

    EDIT2: I created a simple app from scenario 2 of that code (Nav to string) and the result is the same. Page Down skips to the end of the document rather than going down one page. Please note that this only happens when ContentEditable is set on the div!

    • Edited by Roryok Monday, August 18, 2014 9:11 AM
    Monday, August 18, 2014 8:39 AM
  • Hi Roryok,

    > EDIT: I tried the first sample, it said it was incompatible with the version of Visual Studio I have (2013). I'm trying a simple app using the same code...

    Many projects need visual studio 2013 update 2. Install it and open the project again. http://www.visualstudio.com/en-us/news/2014-apr-2-vs.aspx.

    > EDIT2: I created a simple app from scenario 2 of that code (Nav to string) and the result is the same. Page Down skips to the end of the document rather than going down one page. Please note that this only happens when ContentEditable is set on the div!

    Please upload the test app using OneDrive.

    Regards,


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Wednesday, August 20, 2014 1:33 AM
    Moderator
  • I'm installing the update at the moment. 

    Here's a link to the test app. 
    https://onedrive.live.com/redir?resid=EE99EF9560A6740E!96590&authkey=!AAwqhundcW-5bjU&ithint=file%2czip

    If you change the ContentEditable="true" to ContentEditable="false" you'll see the correct Page Up / Page Down behaviour


    • Edited by Roryok Wednesday, August 20, 2014 8:43 AM
    Wednesday, August 20, 2014 8:42 AM
  • I've now updated Visual Studio and successfully built and run the sample project you sent me. The result is the same. 

    When I paste in some long HTML with contentEditable="true", Page Down skips to the bottom of the page instead of one page height
    Friday, August 22, 2014 7:57 AM
  • StackOverflow answered my query. It turns out it was as simple as setting a height and overflow-y: scroll on the div. That's all!

    Standard Page Up / Down behaviour is back working as intended. 


    • Marked as answer by Roryok Wednesday, August 27, 2014 9:24 AM
    Wednesday, August 27, 2014 9:24 AM