Basic problem is, when user tabs in a specific text input on a form, prefilled "+36" gets selected. I'd like to somehow put the cursor right after it (after the +36), instead of selecting the whole word. I've been thinking about disabling text selection of text inputs but no result yet. Googled a lot for it but couldnt find anything but disabling text selection on web pages, which is not really related. How could I solve this problem?
If you are using Jquery, you can try something like this on document ready
$(document).ready(function() {
$("input").focus(function() {
var input = this;
setTimeout(function() {
input.selectionStart = input.selectionEnd;
}, 1);
});
});
Please find the Jsfiddle for the same Jsfiddle Input Focus
In your form element put autocomplete attribute like below
<form method="post" action="/form" autocomplete="off">
</form>
Related
I'm using Angular 1.5.9
I have a big form, which I scattered through different Bootstrap Accordion.
When there is an error in the form, I want to be able to change the class of my accordions to show in which accordions the error is located.
To check for errors in a whole form, I can check
myFormName.$error
And to check errors for an element, I can simply do
myFormName.myInputName.$error
But I don't know if there is a way to do this for multiple element at once, without having to check each element individually.
My first thought was to change the name of my inputs like so:
<input name="accordion1.fieldName">
But this didn't give me the expected result: I don't have myFormName.accordion1.$error, actually, I don't even have myFormName.accordion1.fieldName, since my data is actually stored in myFormName['accordion1.fieldName'] which is pretty much useless.
Has anyone found an answer to this problem? I think I'll have to check each field, which is kinda ugly, and a mess to maintain whenever we add / remove fields...
Maybe there is a directive out there that could do that for me, but as a non-native English speaker, I can't find which key words to use for my search in this situation.
One approach is to nest with the ng-form directive:
<form name=form1>
<div ng-form=set1>
<input name=input1 />
<input name=input2 />
</div>
</form>
{{form1.set1.$error}}
You could name the fields with a prefix such as 'accordion1_' then add a controller function that will filter your fields.
ctrl.fieldGroup = function(form, fieldPrefix) {
var fieldGroup = {};
angular.forEach(form, function(value, key) {
if (key.indexOf(prefix) === 0) {
fieldGroup[key] = value;
}
});
return fieldGroup;
}
Then ctrl.fieldGroup('accordion1') will return an object with the appriopriate fields on it. You could extend the function further to add an aggregate $error property to the resulting fieldGroup object.
How to make the quill editor field required? The editor gets rendered into a div, but it isn't clear if there is a way to make the field/editor required when the form submits.
As you wrote, Quill works with a div and not with a form element so it can't help you with form validation.
You'll need to check manually if the editor's content is empty, prevent the user from submitting the form and show a message that this field is required.
You can copy quill contents to a hidden input element before submitting the form as shown in this example.
A custom form control is also a good way to go. You can try to workaround with Quill's event handler and getting the value of the form.
Then a custom form validator is also possible.
Check : https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html
I've been trying to work around exactly this problem too today, using Python for back-end and a hidden form-field (name='editor') to get the value from the quill container to the back-end. Ended up with not actually really a validator but working about the same:
if request.form['editor'] == '\"<p><br></p>\"':
flash("You cannot send in empty posts!")
return redirect(CURRENT PAGE)
else:
CODE EXECUTED IF EDITOR IS NOT EMPTY
Not sure what you're doing with the input on the editor or whether you're even using Python for backend but I hope this helps. "<p><br></p>" is what the console told me the standard input on empty submission was when getting the information out of the editor.
Good luck!
const yourText = '<div><br></div>';
const htmlTagsToRemove = ['<div>', '</div>', '<br>'];
function removeHtmlTags(data) {
let text = data;
htmlTagsToRemove.forEach(it => {
text = text.replace(it, '');
});
return text;
}
const newText = removeHtmlTags(yourText);
console.log(newText);
I have a requirement to open a modal on click of input box. Modal contains list of countries with search bar, once modal is open it searches for text picked from input and shows filtered list. Now user can search for different country and select from filtered list, modal closes and value is added to input field. In code,
openCountryPickerModal($event) {
let modal = this.modalCtrl.create(CountryCodePickerComponent, {"searchValue":$event.target.value});
modal.onDidDismiss(data => {
if(data){
$event.target.value=data.countrySelected;
// Here: the value set to $event.target.value is not updating to input box's model emergencyContactInfo.currentPersonalAddress.country
}
});
modal.present();
}
and in template
<ion-input (click)="openCountryPickerModal($event)" [(ngModel)]="emergencyContactInfo.currentPersonalAddress.country" type="text" placeholder="Country" readonly></ion-input>
Now the problem is, though it appears value is changed in UI, but never updates value to model. Any special reason?
I tried many ways to solve this but nothing works and I appreciate help if any.
I have a large form and I would like when the user clicks a "new" button for the focus to be placed in a specific input field. There's a grid on the form and every field has a known id. Note it might not be the first field so not easy to use the tab.
Would appreciate some advice if this is possible. Would save having to manually have the user move the cursor over and click in the input field.
Update: Changed "move cursor" to "change focus"
Here is one solution -
Angular js gives you an advantage of using some of the extra features so that you dont have to use the jquery.
Here is one way to implement the autofocus feature.
<div class="button" input-focus>{{element.idORname}}</div>
and the directive to be defined here.
.directive("inputfocus",function($timeout){
return {
link : function(element,attributes){
element.bind('click',function($timeout){
$timeout(function(){
element/*.parent() or.child()*/.find('type of the field you want to select')[0].focus();
);
);
);
Here you can use the javascript or jquery methods for the dom traversal if there are nested fields in your code.
$timeout is necessary to call for the focus after the browser renders when user has finished clicking the event
As you can see the find('')[0] is a replacement for find('').focus as the latter requires jquery to be used.
Place "autofocus" attribute on the element that you want to focus.
Example:
Name: <input type="text" name="name" autofocus />
If all the input ids are known, just use that.
$("#NewButton").on('click', function(){
//Other code.
$("#IdOfInputToBeFocused").focus();
});
Custom data attribute can be used with jQuery like this
<input data-field="special" />
And then that specific field can be called like this
jQuery('input').find("[data-field='special']").focus();
I am using angular-xeditable to edit elements within a form. I would like to have all the elements in "editable" mode at all times, e.g. no "edit" button needs to be pushed before the user starts editing.
I have been trying to use the $show() in my controller to enable the elements in the form, however it seems like the elements goes into viewing state again for example when using "onaftersave" when trying to save the values etc.
How do I do in order to always be in edit mode where the user never needs to enable editing in order to start editing the values?
Possibly try adding shown=true in your html:
<form editable-form shown="true">
I had this same problem. Even when trying to $show() the form again at the end of my onaftersave function it still wouldn't work. I suspect the visibility is being hidden after the onaftersave function runs but I didn't actually check if that's the case. Here's how I got around it:
$scope.$watch('yourFormName.$visible', function() {
$scope.yourFormName.$show();
});
Now whenever the form visibility changes to hidden, it will just show it again regardless of when it changed.
If your form is already open, and you just want to keep it open after submitting, you can do this:
<form editable-form name="MyForm" onbeforesave="saveMyData()" onaftersave="keepFormOpen()">
and the function keepFormOpen() would look something like this:
$scope.keepFormOpen = function() {
return "fake error message";
}
What this does is essentially gives the form a fake error message after you have already saved your data. This fake error message will interrupt the forms closing process, but since it was called after you already saved your data, it won't affect the previous submit.
To really keep open the form we can do the following:
<form editable-form name="MyForm" onbeforesave="saveMyData()" onhide="MyForm.$show()">