Input field loses focus in android, causing onscreen keyboard to disappear.

[sussy123]

I am baffled at this webform on my responsive site which works perfectly fine in all iOSdevices and android tablets. However on android smartphones, specifically samsung s3/s4 -when the text box is clicked- the keyboard appears for less than a second then suddenly disappears. Should a set focus rule be implemented? Even though it responds properly on other devices. I am new to jQuery; any advice greatly appreciated.

<div class="message-container" id="message-composer">
    <div class="message-form-content">
        <div class="message-form-header">
            <div class="message-form-user"><img src="{$url}/thumb.php?src={$avatar}&t=a" /></div>
            {$lng->form_title}
            <div class="message-form-private"></div>
            <div class="message-loader" id="post-loader9999999999" style="visibility: hidden"><img src="{$url}/{$theme_url}/images/preloader.gif" /></div>
        </div>

        <div class="message-form-inner">
        <form id="imageForm" name="form" action="{$url}/requests/post_message.php" method="POST" enctype="multipart/form-data" >
            <textarea id="post9999999999" class="message-form" placeholder="{$lng->message_form}" name="message"></textarea>


        <input type="file" name="myimg" id="imgInp" style="display: none;"/>
        <input id="clkimg" type="image" src="{$url}/{$theme_url}/images/icons/events/camera.png" width="30px"/>
        <br />
        <img id="target" src="#" width="100" height="100" />


        <script>
                 function readURL(input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();            
                    reader.onload = function (e) {
                        $('#target').attr('src', e.target.result);
                    }

                    reader.readAsDataURL(input.files[0]);
                }
            }

            $( document ).ready(function() {
$('#target').hide();
});

            $("#imgInp").change(function(){
                readURL(this);
                $('#target').show();
            });

            $("#clkimg").click(function() {
                $("#imgInp").click();


            });



        </script>
        </div>

        <input type="hidden" name="privacy" id="message-privacy" value="{$private_message}" />

        <div class="selected-files"><span id="queued-files">0</span> {$lng->files_selected}</div>
        <div class="message-form-input"><input type="text" name="value" id="form-value" /></div>
        <div id="values">

            <input type="radio" name="type" value="crime" id="crime" /><label for="crime" title="{$lng->label_crime}"><img src="{$url}/{$theme_url}/images/icons/events/crime.png" /></label>
            <input type="radio" name="type" value="visited" id="visited" /><label for="visited" title="{$lng->label_visited}"><img src="{$url}/{$theme_url}/images/icons/events/visited.png" /></label>
            <input type="radio" name="type" value="movie" id="movie" /><label for="movie" title="{$lng->label_movie}"><img src="{$url}/{$theme_url}/images/icons/events/movie.png" /></label>
            <input type="radio" name="type" value="music" id="music" /><label for="music" title="{$lng->label_music}"><img src="{$url}/{$theme_url}/images/icons/events/music.png" /></label>
            <input type="radio" name="type" value="game" id="game" /><label for="game" title="{$lng->label_game}"><img src="{$url}/{$theme_url}/images/icons/events/game.png" /></label>
            <input type="radio" name="type" value="food" id="food" /><label for="food" title="{$lng->label_food}"><img src="{$url}/{$theme_url}/images/icons/events/food.png" /></label>
        </div>

        <div type="button" name="action" class="message-btn" value="Post" id="9999999999"><a onclick="startUpload()">{$lng->post}</a></div>

    </div>
    <iframe id="my_iframe" name="my_iframe" src="" style="display: none"></iframe></form>
</div>

<div id="load-content"></div>

[ryantroop]

You may have to look outside the form to figure out what is going on. I can image an on-resize firing, or the phone triggering an orientation change, when the keyboard displays, and whatever gets triggered may be causing you to lose focus on the input field.

Really, you will simply have to debug the old fashioned way and see what is firing when, and figure it out :-/

use AJAX and JQUERY. end of story