none
Interaction with input type="email" in a dialog RRS feed

  • Question

  • I have a JQuery modal dialog which is overlaid over a Bing maps V7 Ajax control control. This form captures a few user details including email, first name, last name.

    This is a responsive site and to fully support mobile we've added type specifiers as follows:

    Email prompt: <input type="email" />

    First name: <input type="text" />

    etc.

    This has given rise to some strange behaviour. When using the arrow keys to move left and right in the typed text on the email prompt the map is panned left to right.

    When using the arrow keys on the prompts of type="text" everything is fine.

    Any suggestions on workarounds or ideally a fix date would be greatly appreciated.

    Thursday, November 6, 2014 10:16 AM

Answers

  • I've managed to reproduce this on newer browsers. It doesn't seem to happen with IE9 and older browsers. The Bing Maps V7 control was released about 5 years ago, before IE10/11. The email input type is fairly new and not supported on all browsers; IE9 and below, Safari. This is unlikely to be changed in the V7 map control. Trying the workaround I mentioned works. I'm able to move inside the input box with the arrow keys. Here is a code sample:

    <!DOCTYPE html>
    <html>
    <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
      <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
      
      <script type="text/javascript">
    	var map;
    	
    	function GetMap()
    	{	
    		map = new Microsoft.Maps.Map(document.getElementById("myMap"), { 
    			credentials: "YOUR_BING_MAPS_KEY",
    			disableKeyboardInput : true
    		});
    	}
    	</script>	
    </head>
    <body onload="GetMap();">
    	<div id='myMap' style=";width:800px;height:600px;"></div>
    	<input type="email" style=";top:100px;left:100px;"/>
    </body>
    </html>
    The forums remove position CSS properties. The map should have a relative position and the input tag an absolute one.


    http://rbrundritt.wordpress.com


    Wednesday, November 12, 2014 4:19 PM

All replies

  • You can disable the key input functionality on the map using the disableKeyboardInput map option. For example:

    var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {disableKeyboardInput : true});
    If you want you can enable/disable this when hiding/showing the modal by using the map.setOptions function.

    http://rbrundritt.wordpress.com

    Monday, November 10, 2014 2:29 PM
  • Hi Ricky,

    Unfortunately is not a solution.

    The problem is that whilst the map is prevented from scrolling, which is fine, however it also prevents the arrow keys on the keyboard from working in the input box as the map control seems to hijack the arrow keys.

    This does seem to be a bug with the Bing Maps control.


    Wednesday, November 12, 2014 3:53 PM
  • I've managed to reproduce this on newer browsers. It doesn't seem to happen with IE9 and older browsers. The Bing Maps V7 control was released about 5 years ago, before IE10/11. The email input type is fairly new and not supported on all browsers; IE9 and below, Safari. This is unlikely to be changed in the V7 map control. Trying the workaround I mentioned works. I'm able to move inside the input box with the arrow keys. Here is a code sample:

    <!DOCTYPE html>
    <html>
    <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
      <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
      
      <script type="text/javascript">
    	var map;
    	
    	function GetMap()
    	{	
    		map = new Microsoft.Maps.Map(document.getElementById("myMap"), { 
    			credentials: "YOUR_BING_MAPS_KEY",
    			disableKeyboardInput : true
    		});
    	}
    	</script>	
    </head>
    <body onload="GetMap();">
    	<div id='myMap' style=";width:800px;height:600px;"></div>
    	<input type="email" style=";top:100px;left:100px;"/>
    </body>
    </html>
    The forums remove position CSS properties. The map should have a relative position and the input tag an absolute one.


    http://rbrundritt.wordpress.com


    Wednesday, November 12, 2014 4:19 PM