I want to display a license agreement in a scrolling textarea and detect when the user has scrolled to the bottom of the text area, then enable the submit button.
Is there a way to do that?
Here's an implementation in javascript. The core functionality is:
function textareaAtEnd(area)
{
return ((area.scrollTop + area.offsetHeight) > area.scrollHeight);
}
Related
I'm using react-native-pell-rich-editor which is built upon the WebView component. As soon as I get to the bottom of the visible WebView (after typing about 20 lines) the text that I'm typing into the RichEditor is appearing below the visible area - so the text is being input, but I just can't see it! I have to scroll down every new line to see what I'm typing.
The KeyboardAvoidingView is pushing up my RichEditor (WebView) when the RichEditor is focused.
Is there a way to auto scroll down to where the cursor is when typing? Perhaps there is a better solution?
<ScrollView>
<KeyboardAvoidingView behavior={'padding'}>
<RichToolbar
actions={[ actions.keyboard, actions.setBold, actions.setItalic, actions.setUnderline, actions.setStrikethrough, actions.blockquote, actions.code, actions.alignCenter, actions.alignLeft, actions.alignRight ]}
editor={that.richText}/>
<RichEditor
initialContentHTML={messageBody}
initialFocus={true}
placeholder={'Compose email'}
ref={that.richText}/>
</KeyboardAvoidingView>
</ScrollView>
There are two parts to the way I solved this problem. I did not use KeyboardAvoidingView.
I also placed the RichEditor inside of a ScrollView, but called the ScrollView.scrollToEnd() method after the editor is initialized so that the cursor would be above the keyboard. This happens after a short timeout after calling RichEditor.focusContentEditor in editorInitializedCallback. Note: doing it this way means you do not need to use the initialFocus prop.
For moving the position while the user is typing, call ScrollView.scrollTo() in the ScrollView's onContentSizeChanged prop. You can use the dimension values that are passed to this prop's function to calculate how many pixels to scroll based on the previous dimensions and scroll position stored in the component state.
I have a dialog box that appears and while closing keyboard with hideKeyboard(); all the form is closed and i get back to the home page so that i can't continue the scenario for filling other data.
Here the screen :
Just use UIScrollView in your dialog box, and set scroll view class TPKAScrollViewController. Download class
You can fill up the fields first using driver.sendkey() then tap on keyboard next button to switch the driver to the next field untill the last field. in last field you will get done button then you can tap on that button.
The default "strategy" of hideKeyboard(); is to tap outside the keyboard, but this can be changed to pressing a key on the keyboard instead.
See the java-client documentation (assuming you're using java-client?) for available hideKeyboard strategies: http://appium.github.io/java-client/io/appium/java_client/ios/IOSDeviceActionShortcuts.html
If your app's keyboard has for example a "Next" button to close the keyboard with, then you could use: driver.hideKeyboard("Next");
I am working on a ToDo list app wherein I keep the focus on the textbox input after the user adds a ToDo item.
Now, the problem is, when the user adds some text input and hits the add button, the focus on the textbox is lost so the keyboard disappears and then the focus gets back to the textbox. So, the keyboard disappears and appears again in a short interval. As you can imagine, this is bad UX.
How do I set the keyboard to be shown explicitly when the focus is on the input button?
I fixed it by setting the focus onto the textbox first when I click the add button then do the actual adding stuff.
I was wondering if there is a way to set prompt text location in TextArea.
Basically I am trying to create the similar effect as ListView Placeholder does. It is just to keep consistency in UI, so that everything mostly would look similar.
Any suggestions with this.
I think you can only do this by a dirty hack:
Set alignment to center.
Depending on your desired behavior either add a focus listener which sets the alignment to left again when focused and back to center when focus left.
text.focusedProperty().addListener((p,o,n)->{
if(n){
text.setAlignment(Pos.CENTER_LEFT);
}else {
text.setAlignment(Pos.CENTER);
}
});
Or add a keylistener to get the left aligned text while typing(and a focus-left listener to reset it if needed, eg. empty)
setOnKeyPressed(e->text.setAlignment(Pos.CENTER_LEFT));
As a new MonoToucher, I have a question which I'm struggling for a while now:
In some cases in my app I need to display a UITextView with a button to its right, at the bottom of the screen.
Basically, I would like to manage some kind of discussion feed in which when the user navigate to a specific discussion he gets the related posts as a list and have a multi-line text input at the bottom of the list with a 'Post' button to the right.
Touching that textView should show the keyboard for input, and the height of the textView should be related to the data entered.
This is the same behavior as we have when we want to write a new Text Message in iPhone, or a post in Facebook.
Another requirement is, that when the user scrolls the posts list, that input (with the button) should not move.
I tried creating a UIToolBar with UITextView and a UIButton, but I can't make it work as expected.
Check out the BubbleCell sample, it does exactly what you want in C#:
https://github.com/xamarin/monotouch-samples/tree/master/BubbleCell