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>