CODEWITHSUNDEEP
javascriptjquerygoogle-maps
Ramprasad
Ramprasad

Reputation: 8071

TextBox keypress event not fires inside Google map infowindow

I tried to allow only valid characters on a TextBox inside a Google map infowindow. The 'keypress' event is not fires. Please help me to resolve this problem.

google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {

        var polylength=polygon.getPath().getArray().length;
        var lastarray=polygon.getPath().getAt(polylength-1);

            vertex=polygon.getPath().getArray();
        var contentString="<form id='myform'>Name:<input name='cname' id='cname' type='text' size='50'></input><br>Address<input name='addr' id='addr' type='text' size='50'></input><br><input type='button' value='submit' onclick='save();'></input></form>";
        infowindow = new google.maps.InfoWindow({
            content: contentString,
            });
        infowindow.setPosition(lastarray);
        infowindow.open(map);
    }); 

$('input').bind('keypress', function(event){
                 alert("pressed");
                var regex = new RegExp("^[a-zA-Z0-9 ]+$");
                var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
                if (!regex.test(key)) {
                   event.preventDefault();
                   return false;
                }
        });

Upvotes: 0

Views: 1039

Answers (1)

Engineer
Engineer

Reputation: 48803

When you are binding event listener to input fields, the input fields are not created yet.You need to add domready event listener on infowindow , then bind the keypresslistener:

infowindow = new google.maps.InfoWindow({
     content: contentString,
});
google.maps.event.addListener(infowindow , 'domready', function(){
    $('#myform input').bind('keypress', function(event){
             alert("pressed");
            var regex = new RegExp("^[a-zA-Z0-9 ]+$");
            var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
            if (!regex.test(key)) {
               event.preventDefault();
               return false;
            }
    });
});

Upvotes: 2

Related Questions