I'm new at Ionic and Angular. I try to create a post status like Facebook, my first task is when the user types any text and press the POST button I want the text in the input field to disappear, but it disappears in the first time when this view is a new load.
When I try to type any text in the input field and press the POST button, the text won't disappear but function in the controller was called. Past, I use label tag but when I press the POST button ng-click didn't work so I change label tag to div tag but it work at the first time as I say above and I include cache is false it didn't work too. Here is my Plunker, This issue is in Chat view.
The ng-model should be bound to an object and not to an variable.
The means the the declaration of the variable should be something like:
$scope.input = {
saySomething : 'Some question'
};
The input field should then be:
<input type="text" placeholder="Say Something" ng-model="input.saySomething"/>
Related
Here is the link for an example of the issue I will attempt to describe. In the chips autocomplete example, click the text box to select a new fruit.
Now, before clicking anywhere else, click again on the text box as you did before.
This should result in no options showing up. The issue here is that the user must either begin keying in a new selection or first click another element in the window before matchip will show the options to choose from. I am wondering if there is a way to fix this issue. I would like a user to be able to choose a selection from the list and then immediately click the text box as they had before and make a new selection.
I'm using mat-chip-list inside an outer *ngFor iterating over a FormArray.
Here is what I'have done. It's pretty efficient :
<input
#validatorInput
#operationTrigger="matAutocompleteTrigger"
[formControl]="contactCtrl"
[matAutocomplete]="auto"
[matChipInputFor]="chipList"
(blur)="contactCtrl.setValue(''); validatorInput.value='';"
(click)="contactCtrl.setValue(''); validatorInput.value=''; operationTrigger.openPanel()">
The trick is
Always clear your html input and your (shared) formControl with an empty and not null value each time the blur and click events occur.
Do NOT do this 'clear' on the input focus event. (Because when you delete the last chip, the input is auto-focus and you will have the famous Expression has changed after it was checked.
Call operationTrigger.openPanel(); when the user click on the input
Setting contactCtrl.setValue(''); allows your autocomplete panel to be automatically opened when you call operationTrigger.openPanel()
Setting validatorInput.value=''; is just a way to properly sync your formControl with the html input to ensure a good UX/UI behavior.
Inside my formArray, the formControl is the same for all the inputs but it does not matter since the user can only manipulate one input at a given time
Since you didn't post your code and you mention the example on the material site I'm going to do it as a fork of the stackblitz example they have on their site.
But this will allow you to open the autocomplete panel again despite having had the cursor there and choosing an option previously.
// Using MatAutocompleteTrigger will give you access to the API that will allow you to
// to open the panel or keep it open
...
#ViewChild(MatAutocompleteTrigger, {static: false}) trigger: MatAutocompleteTrigger;
...
ngAfterViewInit() {
fromEvent(this.fruitInput.nativeElement, 'click')
.pipe(
tap(() => {
this.trigger.openPanel()
})
).subscribe()
}
Link to the full stackblitz:
https://stackblitz.com/edit/angular-sb38ig
I was working on search bar where user input the keyword. When the user hit the enter key, results are displayed. I want to implement in this way -
Whenever, user hits enter to search results for a keyword, you can see there is no blinking cursor at the end of keyword. This don't happen when you go to google.com and click on input box. At that time, we see a blinking cursor.
The problem I'm facing is that, when a user hits enter key, results are displayed but cursor remains blinking in search bar. What should I do to solve this problem so that clicking on input box should display a blinking cursor but on hitting enter key, it hides blinking cursor ?
NOTE - Since I don't know, how this problem is being generated I haven't provided the code. I just wanted to have some rough idea with code how should I proceed. :)
This is done by taking the focus away from the input field, which requires a tiny bit of javascript.
I don't know how your code works as you aren't providing the code but form submit would be I imagine, how you would trigger the action on enter?
So I'll do a quick example...
We have a form which is populated with an input field.
var form = document.querySelector('#form');
var input = document.querySelector('#text');
form.onsubmit = function(e) {
e.preventDefault();
text.blur();
}
<form id="form">
<input type="text" id="text">
</form>
Using .blur takes the focus away from the input.
I miss read your question and saw that you were doing this with Angular, however I will leave the original answer there for anyone else that may stumble upon this answer.
To do it in Angular, it has a lovely attribute of ng-enter.
We can then add this to the input by doing <input type="text" ng-enter="$scope.blur()" />
Then we can create this action by doing
$scope.blur = function($event) {
var input = $event.target;
input.blur();
}
How to make the html input field allow to be blank, when i click the submit button on the form view?
the idea is when I click the submit button, the input is a must to key in something else the behind code is unable to run, I am using the asp.net and the button is the asp button not html button
http://s15.postimg.org/wtl7xtuyx/myinputpic.png
I want to allow the new password can be blank
If clearing fields is what you want, use .reset() method.
document.getElementById("YourFormName").reset();
A working fiddle here:
https://jsfiddle.net/4fpk2z9o/
I may comprehend it wrongly as I do not really understand what do you want.
Update (To disable html 5 form validation) :
Add novalidate='' or <form action="yourform.asp" novalidate> to your form.
I have a question about making input fields required before being able to click a input button (not submit button). My code below only will send out the requirement notice after a submit button is click.
I have my form split into 3 div's with 'next' buttons in between which conditionally displays the next div. How do I make the input field to be required before the 'next' button brings up the next div portion of my form?
You should post the html for your question. It is missing. That being said, look into the blur event that gets trigger everytime an input loses focus. You could add the logic to display an error to the user and disable the next button.
http://www.w3schools.com/jquery/event_blur.asp
You have two main options:
FIRST OPTION
You could disable your button like so: <input id="but" type="button" disabled>, and then, you could set your field onchange method to enable the button i. e. <input type="text" onchange="changed();"> and in your script,
function changed(){
if(1 == 1){ // custom test
document.getElementById("but").disabled = false;
}
}
SECOND OPTION
In your button handler, verify your textfield is filled i. e.
function butHandler(){
if(document.getElementById("textfield").value !== "") {
// do your actions
}
}
I have an HTML form where I have two fields: username and password.
Now, I want that "Username" and "Password" appear inside the fields to indicate the users what to put in. Currently I'm assigning these using the value= option, however if I submit the form, "Username" and "Password" get submitted too.
Is there a clean way how to make the text appear without including it in the submit if the submit is clicked.
Thanks!
Krt_Malta
Ok, this is basically how I do it. I place the labels inside the fields, then when the page loads, I store the labels in a hidden manner using .data(). When the form gets submitted, if it contains the same thing as in .data(), then I clear it (or you could disallow submission if you want the field to be filled)
$(document).ready(function(){
// this will make sure we always remember what the values were:
$("form.myform input[type='text']").each(function(){
// I like to add a class as well, so I can make the label text in a lighter color
if ($(this).val().length > 0) {
$(this).data('label', $(this).val()).addClass('label');
}
});
// this will clear the text when the input receives focus:
$("form.myform input[type='text']").focus(function(){
if ($(this).data('label') == $(this).val()) {
$(this).val('').removeClass('label');
}
});
// this will make sure the fields don't get submitted like that, but won't stop
// the form from being submitted....
$("form.myform").submit(function(){
$(this).find("input[type='text']").each(function(){
if ($(this).val() == $(this).data('label')) {
$(this).val('');
}
});
});
I haven't run this or tested in a browser, but in theory this should work (I've done this before)
Also, we're not filling the box with the label text again, once it's lost focus if the user didn't edit the text....
In HTML5, this feature is provided and is called a placeholder. Otherwise you typically use a Javascript library.
Just don't include it in your php/asp script with which you submit the form.
--edit--
Just re-read your question. I think you mean that people are just coming onto the page and clicking submit while the default values are in there, yeah?
If you use validation (javascript or php/asp) to disallow submission of 'username' and 'password' for these fields they won't be allowed to submit the form without changing the values within.
Is that the kind of thing you meant?