I have a search box inside a hidden div that slides open when a button is clicked on mobile devices. It works great except for on Android devices. On android when the search input field is touched to bring up the keyboard the div slides closed making it impossible to search.
How can I keep the div open to enable the search box to be used?
Thanks
Here's the jQuery:
$(document).ready(function() {
$('.search_btn').click(function() {
$('.search-box').slideToggle('fast');
});
});
HTML Markup:
<div class="search_btn">Search</div>
<div class="search-box">
<?php get_search_form(); ?>
</div>
Related
<input type="text" class="numberonly">
I want to change the type of this html input from text to number on focus.
$(".numberonly").focus(function(){
$(this).attr("type","number");
});
this jquery works fine but when the webpage is embedded inside the android webview, the android keyboard wont show up on focus. Does jquery .focus prevents default behavior or what? Should I trigger the focus programmaticaly?
e.g.
The second click in the input, brings up the keyboard.
The android default browser has no problem. But the webview inside the android app fails to load keyboard.
It's an Android hybrid app.
Within WebView, the loaded HTML has this code.
<span ng-controller="FormController">
<textarea ng-model="note"></textarea>
<input type="button" class="notes-btn" ng-click="saveNote()" value="save notes">
<input type="button" class="notes-btn" ng-click="getAll()" value="email notes">
<input type="button" class="notes-btn" ng-click="clearNote()" value="clear this note">
<input type="button" class="notes-btn" ng-click="clearAll()" value="clear all notes">
</span>
Clicking the textarea will bring up the keyboard, I can see it animating up but then it animates down right away, on Tablet it doesn't appear at all, wondering what's causing the issue?
Please advise.
Edit
For some reason I do see the selection arrow (blue color) as soon as I tap on the textarea for a brief moment and then keyboard hides itself.
I don't have any javascript attached to textarea other than what angular does.
Edit 2
I've added some console statements
<textarea onclick="console.log('click')" onfocus="console.log('focus')" onblur="console.log('lost focus')"></textarea>
and i could see focus, click and lose focus in the console as soon as i tap on the textarea, something is triggering lost in focus as soon as I click in the textarea.
I am viewing a webpage in Android browser.
When I focus(tap) on <input type='number'> the page scrolls to the bottom
Is it a bug and how to solve it?
I'm working on an Android App that is ported to an app using phonegap.
It's coded in HTML, CSS, Javascript/JQuery.
There is a button a user can click. If a user taps the button it should change the buttons text color to black, when the user removes his finger from the screen the button text should turn white.
How can I accomplish this?
Try this, your HTML will be like this:
<a class="ui-btn ui-btn-b btn ui-btn-inline">button</a>
And then your CSS:
.btn{ color:#fff !important;}
.btn:active{ color:#000 !important;}
A working fiddle
I have a Textbox on my webpage, how do I disable the keyboard popup on Android/mobile devices? Here is my code:
<input type="text" class="datetimepicker" style="position:relative; top:5px; left:300px;"/>
Make text element disabled or readonly. But remember the difference between disabled and readonly: browser don't send to server disabled elements.