I work with ion-searchbar on Ionic 4.
I would like to know how I can clear the content, if the user clicks on any other button (not the cancel button).
<ion-searchbar id="name_of_searchbar" animated placeholder='search' (ionChange)="buscar($event)">
</ion-searchbar>
In the function (any another button), I try with: document.getElementById ("name_of_searchbar"). innerHTML = "";
but although it modifies the content, it also removes the ion-searchBar
Thank you!
Add in search bar [(ngModel)]="searchValue"
<ion-searchbar [(ngModel)]="searchValue" animated placeholder='search' (ionChange)="buscar($event)">
</ion-searchbar>
And in ts file:
export class PageName {
searchValue:string;
constructor(){}
clearSearch(){
this.searchValue = "";
}
}
In the button you want the user to clear text with , put inside the button click example :
<ion-button color="primary" (click)="clearSearch()">empty search</ion-button>
Related
I have a simple autocomplete menu just like the one below.
Is there any way to monitor if the user clicks outside the menu? By default, if the user clicks outside the menu, it will close the menu. But I would like to trigger other actions besides just closing the menu.
I will keep it simple with the following scenario:
I have a boolean variable called myBoolVar that has a default value of false.
When the autocomplete is mounted, it will autofocus the input and the menu will only open when the user starts typing in the input. Untill here the myBoolVar remains false. but only when the user clicks outside of the menu, then the menu closes and the myBoolVar changes to true.
I have been through vuetify api documentation without any luck so far.
<v-autocomplete
v-model="valuesActor"
:items="actorArray"
:search-input.sync="searchActor"
filled
autofocus
background-color=#313131
append-icon=""
prepend-inner-icon="mdi-arrow-left"
color="var(--textLightGrey)"
>
</v-autocomplete>
You can use blur event for autocomplete like that:
methods: {
someMethod() {
alert('tadam')
}
}
<v-autocomplete
v-model="value"
:items="items"
#blur="someMethod"
/>
You can find the documentation here https://vuetifyjs.com/en/api/v-autocomplete/#events
You can use the v-click-outside directive calls a function when something outside of the target element is clicked on.
for more info see the vuetify: v-click-outside docs.
You can use something like this
<v-autocomplete
v-click-outside="onClickOutside"
....
and on click outside you can call method
methods: {
onClickOutside () {
....
},
},
I'm fairly new to vuetify and vue in general. The problem I'm facing is that when I click on a datepicker, the calendar pops up and when I tab out, the cursor moves to the next input field but the calendar does not close.
I want it to close automatically on tab out.
I tried setting close-on-content-click="true" instead of false but to no avail. I'm not sure what else to try.
Here is a codepen I found vuetify documentation that has similar implementation and behavior as my application. codepen
Thank you for any inputs.
add this #keydown.tab='menu1 = false' in v-text-field
close-on-content-click is for mouse clicks and does not apply to keyboard actions. You need to explicitly toggle the v-menu model when the input loses focus.
To close the menu when whenever the input field loses focus I would attach the toggle to the blur event. You can do this by replacing the #blur listener to a method, in which you will set the menu model to false.
<v-text-field
v-model="dateFormatted"
label="Date"
hint="MM/DD/YYYY format"
persistent-hint
prepend-icon="mdi-calendar"
v-bind="attrs"
#blur="updateDate"
v-on="on"
/>
updateDate(event) {
// This is the same value as dateFormatted,
// you don't need to say this.dateFormatted like in your codepen.
const value = event.target.value;
this.date = this.parseDate(value);
this.menu1 = false;
}
"Destructuring" is JS good practice instead of randomly named variables or verbosity so I would write the first line as:
const { value } = event.target;
If you were passing additional variables into updateDate method you would need to write it as updateDate($event, variable) but if not, $event as first parameter is a given.
referred to this link:
Hide footer on keyboard open Ionic3
But then also issue is the same
Issue is same as in above image.... I have just added button in footer...
.html file
<ion-content>
<textarea placeholder="Please leave your review"></textarea>
<ion-content>
<ion-footer>
<ion-button (click)="submit()">Submit</ion-button>
</ion-footer>
So, When click on textarea, keyboard opens and the buttons appears to be above the keyboard.
I want whenever the keyboard opens.....the footer get hide.
IONIC 4
Step:1 You need to install native keyboard plugin for using keyboard methods. You can install it from here.
Step:2 Then import it in your page.ts file like this
import { Keyboard } from '#ionic-native/keyboard/ngx';
Step:3 Then put it in the providers under #Component as
#Component({
providers: [Keyboard]
})
Step:4 After that , make a constructor for keyboard in your class in constructor section. Repeat same step 2-4 in your app.component.ts file
constructor(public keyboard:Keyboard) {
}
Step:5 Then take a variable to default hide keyboard on load of the page as in your class:
isKeyboardHide=true;
Step:6 After that, all you need to call default methods of keyboard in ionWillEnter method and on show put the variable value as false for showing keyboard.
ionViewWillEnter() {
this.keyboard.onKeyboardWillShow().subscribe(()=>{
this.isKeyboardHide=false;
// console.log('SHOWK');
});
this.keyboard.onKeyboardWillHide().subscribe(()=>{
this.isKeyboardHide=true;
// console.log('HIDEK');
});
}
Step:7 Hide and show bottom div or footer accordingly.
//// FOR DIV BOTTOM DIV////
<div class="" *ngIf="isKeyboardHide">
</div>
//// OR FOR FOOTER ////
<ion-content></ion-content>
<ion-footer *ngIf="isKeyboardHide">
</ion-footer>
The best solution is use 'inVisible' property to hide footer or div.
for example:
<ion-footer *ngIf="!keyboard.isVisible">
I am footer!
</ion-footer>
When a page has a search box with multiple tabs, one of the tabs is always selected; either the default tab is selected or the user has changed the tab. In either case the search input box of the selected tab should always have the keyboard focus so the user can just start typing their keywords.
Example: search box on http://www.lib.umd.edu/
Do you know how I could get the focus to be in the input box when a different tab is clicked? I got it to work on the first tab, but when I click another tab, the focus is lost.
The script I am using:
<script type="text/javascript" language="JavaScript">
document.forms[''].elements[''].focus();
</script>
$(document).ready(function () {
setTimeout(function () {
// focus on the txtenclude text area first visible and enabled input field or textarea
$(":input:visible:enabled").each(function () {
if ($(this).is('textarea')) {
$(this).focus();
return false;
}
});
}, 1000);
Your code snippet
To set the focus on a certain element you have to specify which element should receive the focus. In your snippet this specification is missing:
document.forms[''].elements[''].focus();
If you want to you can use this line: document.getElementById("DuringSearch").focus();
DuringSearch is the id of the input element that should receive the focus <input id="DuringSearch" type="text">
The problem that needs to be solved is to change the id based on the tab that was clicked.
There are several ways to achieve this. In a previous post is used an attribte named data-tab.
Example to wire up tabs and focus to input
To attach an event handler to a click on a tab you can do the follwing (using jQuery) on document.ready:
// add event handler for click on tab
$("#tabs li").click(function () {
loadTabs(this);
setFocusOnInput(this);
return false;
});
If you click on a tab the attached event fires and executes the 2 functions: loadTabs and setFocusOnInput.
To set the focus you need to know the id of that input-box. In my exmaple i am using an attribute data-tab
<li data-tab="Before">
Before
</li>
In my example i use the following function:
function setFocusOnInput(_this){
var tab = $(_this).attr("data-tab");
var searchId = tab + "Search"
console.log("_this:", _this);
document.getElementById(searchId).focus();
}
See more explanations on my previous post.
Could you elaborate what you want to know. Do you want to know how to wire it up in general or how to do it in a specific case?
I have created two Pages Page1.xaml and Page2.xaml in windows8 metro apps.
I have created one textbox and Hyperlink in Page1.xaml. Clicking that Hyperlink button after entering some text in textbox in Page1.xaml. Then its navigating to the Page2.xaml. In Page2.xaml I am going to show the text which was entered in the Page1.xaml textbox.
Here after coming to the Page2.xaml I am clicking the back button for going to previous page Page1.xaml. Here I want to show the text in the textbox which I have entered earlier.
But I am getting error when clicking the back button.
Could you please provide me the solution for displaying the text in TextBox of Page1.xaml
Thanks in advance
One way to make code available across different script scopes is to use a WinJS namespace.
For example, in page1.js, you would have:
(function(){
function setText(){
var mytext = "";
WinJS.Namespace.define("page1", {
text: mytext
});
}
})();
in page2.js, you'd put the text in that namespace:
(function(){
page1.text = "page 2 text!";
})();
Back in page 1, you can retrieve that value later on:
(function(){
function setText(){
var mytext = "";
WinJS.Namespace.define("page1", {
text: mytext
});
}
function getText() {
document.querySelector("#myTextField").value = page1.text;
}
})();
I'd suggest being a bit more formal about what you put in namespaces, but that's one way to do it.