i referred to the official appcelerator site and implemented the Text Field where i have set the "focusable" property to true and have added the key pressed event but it is not working.Kindly provide the solution in detail?
index.xml:
<Text Field id="txt_field" focusable = true/>
index.js:
$.txt_field.addEventListener('keypressed',function({
*********my code***********
});
First, there seems to be a space in your xml, not sure if that is a typo. It should be this:
<TextField id="txt_field" focusable="true" />
Next, the keypressed event only works with hardware keys. If you just want to know a new character was typed, you should use the change event.
Best practice is to also add the event listeners to the xml, and don't add them in javascript
<TextField id="txt_field" focusable="true" onChange="changeTextField" />
Then you'll need to create a changeTextField function in your controller:
function changeTextField(e) {
// the textfield will be in e.source
// the new value of the textfield will be in e.value
}
based on that, you can check e.value and see what has changed as opposed to the last change.
Related
When I use the ReturnType property and set the value to "Done" nothing happens on the keyboard. I'm expecting the keyboard to close when I press done on my keyboard and nothing happens.
The issue is on Android, but on ios it works.
<Entry ReturnType="Done" />
You can refer to Customize the return key.
ReturnType, of type ReturnType, specifies the appearance of the return button.
I created a project and tried to achieve your need:
<Entry x:Name="MyEntry"
ReturnType="Done"
Completed="Entry_Completed"/>
private void Entry_Completed(object sender, EventArgs e)
{
MyEntry.Unfocus();
}
The result is that entry lost focus as expected, but the keyboard did not disappear.
I searched relevant information about this and found it (Implement pending focus management logic in Handlers). You can follow it.
It seems the Focusable logic is still not implemented yet on Maui. They have stated it will be available in upcoming Previews.
So the workaround for this issue is setting the property IsEnabled to false and immediately setting it to true on your handler:
entry.IsEnabled=false; // This removes the focus and close the keyboard
entry.IsEnabled=true; // This re-enabled the Entry for interaction
I'm building a simple form in chakra-ui with a controlled field. Whenever the user types in an input after a single keystroke focus moves to the next field.
I think there's a bug with react re-rendering the page, and the focus being "off by one" but it's a basic form and pretty frustrating! I can't see any google info on the topic but I've noticed this before when doing forms with Chakra.
The code is as simple as this, but I do have some other form elements on the same page.
docs example
https://chakra-ui.com/docs/components/form/input#controlled-input
const [taskName, setTaskName] = useState('')
const updateTaskName = event => setTaskName(event.target.value)
<Input
// autoFocus={false} // no effect
placeholder='short name for task'
value={taskName}
onChange={updateTaskName}
// onBlur={evt => sanitizeTaskName(evt.target.value)}
/>
Is there a better way to do this, without bringing in a huge Formik type form library?
We are using SimpleFormIterator inside ArrayInput like follows (as example)
<ArrayInput source="backlinks">
<SimpleFormIterator>
<DateInput source="date" />
<TextInput source="url" />
</SimpleFormIterator>
</ArrayInput>
But when clicking "ADD" to add new fields it is still focused in "ADD" button. Is there any way we can focus on first added field after clicking "ADD"?
You could try adding an autoFocus prop on the DateInput, however, it means the first item will be focused automatically too in an Edit form which is probably not what you want.
I think this should be the job of the SimpleFormIterator. Can you please open a feature request issue on react-admin repository ?
In the mean time, you can make your own form iterator which would handle the focus.
i'm trying to code form where you can navigate inside with a next button ( who will hide the current fieldset and show the next one ) and a previous one ( who will hide the current fieldset and show the previous one ). Those two input have a onclick function that will change the fieldset className to active from inactive depending on which fieldset we are. I want to change the next button input type when the user reach the final fieldset so he can submit, but it seems that it automatically trigger the submit event, which means when the user get to the final fieldset, he cant fill any input because the form will submit automatically.
So here's the code :
//When the last fieldset show
if (fieldset[4].className == "active") {
var next = document.getElementById('next');
next.onclick='';
next.type="submit";
next.value="Submit";
next.id='submit';
}
Is there something that i should add to stop the submit auto-firing ?
I've tested your code in JSFiddle and it works good. It means there is something that trigger submit. May be you can post whole javascript in that page and then I can check what is the issue.
var next = document.getElementById("next");
//next.type="submit";
next.setAttribute('type', 'submit'); // I prefer using .setAttribute method
next.onclick='';
next.value="Submit";
next.id='submit';
<form>
<input name="q" value="hello">
<input type="text" id="next">
</form>
I think instead of trying to "hack" the existing button and turn it into the submit, you could just have two buttons, one "next" and another one "submit-button" (hidden initially), once the user advances to the final step, you can hide the "next" button and show the "submit-button" button.
It can be something like this:
//When the last fieldset show
if (fieldset[4].className == "active") {
// hide the next button
document.getElementById('next').style.display='none';
// show the submit button
document.getElementById('submit-button').style.display='';
}
And it would be not complex to make these buttons to appear exactly on the same place with css, so the user will not notice the replacement.
There are browsers who do not allow you to change the type for security reasons. So you will often have problems with it. Just switch between two inputs as boris mentioned (or replace it completely). But to answer your question:
You can catch the autosubmit with another on submit event. First on click mark the button with a class or data attribute like "preventSubmit". Within the submit event check if this class or data attribute exists and prevent the submit (f.ex with prevent default()) and remove the class that all wanted submits by users clicks are not stopped.
Why not just add an event to submit the form you are currently on:
if (fieldset[4].className == "active") {
var next = document.getElementById('next');
next.onclick=(function() { document.forms[0].submit(); });
//next.type="submit";
next.value="Submit";
next.className="MySubmit"; // try to style it as a button for better UX
//next.id='submit';
}
I'm using dojo to validate input fields and if there is an error (for eg: required field) it appears in the dojo tooltip. But, I would like to show error in the custom div instead of tooltip.
So, I'm wondering if there is a way to hide/disable the validate error to appear in the tooltip? If so, I can capture the error message shown in the hidden tooltip and show the result in custom div, which will be consistent with error styling across the application.
Please advise. Thanks.
I would recommend to use the standard Dojo validation mechanism, contrary to what vivek_nk suggests. This mechanism works great in most cases, and covers most situations (required, regular expressions, numbers, dates etc.).
To solve your issue: you can overrule the "dispayMessage" function of a ValidationTextBox (for example).
displayMessage: function(/*String*/ message){
// summary:
// Overridable method to display validation errors/hints.
// By default uses a tooltip.
// tags:
// extension
if(message && this.focused){
Tooltip.show(message, this.domNode, this.tooltipPosition, !this.isLeftToRight());
}else{
Tooltip.hide(this.domNode);
}
}
Just create your own ValidationTextBox widget, extend dijit/form/ValidationTextBox, and implement your own "displayMessage" function.
Simple solution for this scenario is not to add the "required" condition at all to those fields. Instead add a separate event handler or function to check for this validation.
For eg: add a function for onBlur event. Check if the field is a mandatory. If so, show message in the custom div as expected.
<input data-dojo-type="dijit/form/TextBox"
id="sampleText" type="text" mandatory="true" onBlur="checkMandatory(this)"/>
function checkMandatory(field) {
if(field.mandatory=='true' && field.value=="") {
alert('value required'); // replace this code with my showing msg in div
} else {
field.domNode.blur();
}
}
This above code snippet does not use Dojo for validation, rather manual. Dojo actually helps to ease this by just adding the attribute "required". If that is not required, then just ignore Dojos help for this case and go native.
So, for all fields, just add the attributes - "mandatory" & "onBlur", and add the above given function for onBlur action for all these fields.