Handle click a button or undeline text in webview react_native - react-native

I need 1 feature as follows: Click a button or underline text in my webview and console this click. example :
Click "Xem chi tiết" => show a alert "you clicked xemchitiet".
XemChitiet is a "href" or "button" or "element tag html". This my code:
<WebView
source={{html: '<h1>Xem lí thuyết các loại nhiễm điện</h1><a style=\"text-decoration:underline\">Xem chi tiết</a>'}}
/>

You need a React-Webview bridge to accomplish that, take look into react-native-webview-bridge.

Related

issues showing both "return" button and "done" button in "TextInput"

Problem:
Using "TextInput" in react native shows keyboard, and on pressing return, cursor moves to new line, however at this i do not have "done" button to hide the keyboard.
Again, there is props called "returnKeyType={done}, which adds "done" button but now "return" button is gone. I believe user could tap to new line inside "TextInput" box, but it seems to highlight the words typed.
Solution attempt:
Like in numeric keyboard, i thought there should be some props to add "done" button on top of keyboard so that we will have both "return" and "done" botton visible at the same time, but i could not find it.
... another option is i could create my own component with done button, and wrap keyboard as child, but i could not figure out how i do it.
This is basic component, i believe there must be some elegant way to do it. any help is appreciated.
You cannot have done and newline button at the same time.
There should only be one submitting button in keyboard.
But you can make a similar work around.
Custom Button
First option is making custom button like you mentioned.
Make a "Done" button next to your textfield or above the keyboard.
onSubmitEdit
Second option is using onSubmitEdit
Make a custom function that controls what return button should do.
e.g.)
const [textInputValue, setTextInputValue] = useState("");
const returnPressed = () => {
if(need_new_line){
setTextInputValue(textInputValue+"\n");
} else {
returnFunction();
}
};
return (
<TextInput
value={textInputValue}
onChangeText={(text)=> setTextInputValue(text)}
onSubmitEditing={()=> returnPressed()}
/>
);

Ionic 4 - How can I programmatically clear ion-searchbar?

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>

In accessibility mode, how to send an string to screen reader when user double tap on a button in react-native?

Here, when someone tap on that button, VoiceOver or TalkBack will tell what is written in the accessibility label.
Now, I need a way to let the VoiceOver or Talkback speak that the button has been clicked by double-tapping.
I have attached a sample code below.
<TouchableOpacity
accessible={true}
accessibilityLabel="button for adding email address. Double tap to add alternative email"
onPress={() => { this.addEmailField() }} >
<Text>Add email address</Text>
</TouchableOpacity>
Thank you very much for your efforts and time.
I would do something like this
accessibilityLabel={this.props.clicked ? 'saved' : 'button for adding email address. Double tap to add alternative email'}

react-native call onSubmit() when pressed returnKeyType

I'm new to react-native.
I'm struggling on keyboard now. I have TextInput and a button. What I want is that, when user entered input through keyboard, he/she can go to next page with just one click on the return button. So what I simply want is that onSubmit method should be called when user clicks "return" button on keyboard.
Is there anyone can help me?
You can use onSubmitEditing callback of TextInput
Example.
<TextInput
onSubmitEditing={(event) => this.onSubmitHandler(event)}
/>
You can get more information from docs

apex 5.0.1 and css class for HTML button

in apex 4.2.3 i can add class to my button using
Button style : HTML button
Button CSS Classes : myclass
in apex 5
Button style is changed by Button template (HTML button (legacy - APEX5 migration)
==> Where can i put my button css class ?
CSS Classes is hidden by default to display it we have to do one of the two things
1- click on Show all
2- click on "Go to group" then "Appearance"