0

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>
3
Contributors
2
Replies
18
Views
3 Years
Discussion Span
Last Post by [NOPE]FOREVER
0

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 :-/

7

use AJAX and JQUERY. end of story

Votes + Comments
ffff
isnt ajax a cleaning spray?
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.