I'm using textfield in my flutter code. I'm trying to use my own made keyboard instead of the default phones keyboard (Hiding phones keyboard). To edit or modify the text in the textfield, I need to know the current position of the cursor in the field. how can I get that?
String _textInput = '';
void inputCharecterToTextField(int pressedKey) {
_textInput += pressedKey.toString();
setState(() {});
_textEditingController.text = _textInput;
}
This is what I'm doing to input text in the field. But user can change cursor position. So, for modification of the text, I need the cursor position.
Related
I have a TextEditingController which is for phone numbers. If text is pasted in it, I need to process and modify it, trimming whitespaces etc. But that should not happen if the user is typing in whitespaces. How can I differentiate between these two types of events, and call my function only when user pastes text into the field?
Currently my code looks like this and uses onChanged. I'm looking for something like onPaste:
String getCorrectedPhone(String phone) {
phone = phone.replaceAll(RegExp(r"\s+"), "");
return phone;
}
FormBuilderTextField(
controller: _phoneController,
name: "phone",
onChanged: (String txt) {
print('Phone field changed! Is now $txt');
_phoneController.text = getCorrectedPhone(txt);
},
),
You can do something like declare a length with the phone number field and add a listener to the text editing controller or in oNchanged which checks if its length - the old length is >1. Then its pasted
int length = 0;
...
_phoneController.addListener((){
if (abs(textEditingController.text.length - length)>1){
// Do your thingy
}
length = _phoneController.length;
});
So there is another way, that is to ignore any touches on the text field using the IgnorePointer widget and then use Gesture Detector to implement custom long tap and short taps. For long taps, you'll have to create your own small pop up menu for copy cut paste and stuff. Here is some sample code for the UI. As for the functioning, I would recommend using the https://api.flutter.dev/flutter/services/Clipboard-class.html class of flutter. If you need any help in doing this let me know but it should be mostly straightforward
I'm going to get text input using TextField and the following is my code:
public Text textInput;
void Update()
{
if (Input.GetKeyDown(KeyCode.Return)) {
if (textInput.text == "go") {
/* do something */
textInput.text = "";
}
}
}
I assigned the Text element under TextField to public Text textInput, and I expected that once a player types "go" and presses enter, the TextField will be cleared and the player be able to type next sentence.
However, after I type "go" and press enter, the text in TextField remained and the focus was out.
How can I clear the TextField maintaining the focus on it?
I think the "problem" is that the input field by default also handles the Return key as the submission command which automatically loses the focus.
The default InputField.lineType is
SingleLine
Only allows 1 line to be entered. Has horizontal scrolling and no word wrap. Pressing enter will submit the InputField.
You could instead set it to MultiLineNewLine
Is a multiline InputField with vertical scrolling and overflow. Pressing the return key will insert a new line character.
So it doesn't automatically call the OnSubmit and lose focus when pressing the Return key.
Using that as an alternative to use Update and GetKeyDown you could use InputField.onValidateInput and do something like
public InputField textInput;
private void Awake ()
{
textInput.lineType = InputField.LineType.MultiLineNewLine;
textInput.onValidateInput = OnValidate;
}
private char OnValidate(string text, int charIndex, char addedChar)
{
if(addedChar == '\n')
{
if(text.Equals("go"))
{
// Do something
}
textInput.text = "";
return '';
}
return addedChar;
}
I have an input text field filled with date. I have to clear the date text and click cursor to somewhere on webpage or to some element to do other actions.
Now the problem is I am unable to move cursor to some other element or somewhere on webpage. Cursor remains on that input box once text is cleared
I have tried following ways:
mouseMove: I am trying to move cursor to somewhere on webpage and clicking it but not working.
blur() : used this one to loose the focus but not working.
var input = element(by.css('input[placeholder = "Choose a date"]'))
var someOtherElement = element(by.id('otherElement'));
input.click().clear().then((function) {
browser.actions().mouseMove(someOtherElement).click().perform();
});
Actual: Once date text is cleared, cursor remains on the text input. it is not moving from that text box.
Expected: I wanna cursor loose the focus and move to some other element and click it so that I can do some other actions.
Do you get any error stack for this? Would be great if you paste it here.
I am actually suspecting that someOtherElement does not exist or not clickable.
Can you give below snippet also a shot by making the function which have below code in it as async()?
var input = await element(by.css('input[placeholder = "Choose a date"]'));
var someOtherElement = await element(by.id('otherElement'));
await input.click().clear().then(() => {
someOtherElement.click();
})
.then(() => console.log('finished'));
I have tried to use text mesh pro input field in my project but I have face one series issue with that. i.e If try to validate empty or null text in input field it fails. For example when user without typing any text in tmp input field and click done button I have set a validation like not allowed to save null empty values but when user click done button without typing any text, those validations are fails. Please suggest any idea to fix this issue. Thanks in advance.
Here is the code I have tried :
var text = TextMeshProText.text; // here "TextMeshProText" is 'TMP_Text'
if(!string.IsNullOrEmpty(text))
{
//do required functionality
}
else
{
// Show alert to the user.
}
I have set the validation like this but without giving any text click on done button it fails null or empty condition and enter in to if.
I found the problem. It fails because you use TMP_Text instead TMP_InputField.
Note that: Use the code for TMP_InputField; not for TMP_Text that is inside it as a child.
Change your code to this:
TMP_InputField TextMeshProText;
...
public void OnClick ()
{
var text = TextMeshProText.text; // here "TextMeshProText" is 'TMP_InputField'
if (!string.IsNullOrEmpty(text))
{
//do required functionality
}
else
{
// Show alert to the user.
}
}
I hope it helps you
I'm trying to create a couple of methods to let tinyMCE move the cursor to some SPANS in the text, and this works ok if all the spans are in the visible part of text, but for long documents, when a span isn't visible (have to scroll to view it), it move the caret, but the text is not scrolled:
This question shows how to move the caret, but it doesn't scroll. How can I force the editor to scroll to the caret position?.
I've found the solution, just after setting the caret position, add some text, and the editor will scroll automatically to the new position:
ed.execCommand('mceInsertContent', false, "");
#leonardorame 's answer works, but it scrolls the text into view only at the bottom of the page like so:
......
......
|
If you would rather have the caret at the top...
|
......
......
then you need a bit extra:
//save the current position
var bm = ed.selection.getBookmark(2, true);
//scroll to the end
ed.selection.select(ed.getBody(), true);
ed.selection.collapse(false);
ed.execCommand('mceInsertContent', false, ");
//scroll back up, so that the caret is now at the top
ed.selection.moveToBookmark(bm);
ed.selection.collapse(false);
ed.execCommand('mceInsertContent', false, "");