It's a minimal example. I'm trying to show a textarea and the set the focus onto it. It doesn't work. If the textarea is visible, the focus works good but after making the textarea visible, it loses the focus. Why?
<div class="posts">
<div class="post">
<textarea #textarea1 [(ngModel)]="text" class="comment-text" name="text"></textarea>
</div>
<button (click)="textarea1.focus()">SetFocus on the first textarea</button>
<br><br>
<div class="post">
<textarea #textarea2 [(ngModel)]="text" [hidden]="!show" class="comment-text" name="text"></textarea>
</div>
<button (click)="show = !show; textarea2.focus()">SetFocus on the second textarea</button>
</div>
Demo: https://stackblitz.com/edit/angular-ebe7gc
At the time the hidden attribute gets false the focus() command can't get the textarea.
With a small setTimeout() you can solve that problem.
https://stackblitz.com/edit/so-01-angular-4tl2u
showAndFocus(elem) {
this.show = !this.show;
setTimeout(() => {
elem.focus();
},10);
}
<button (click)="showAndFocus(textarea2)">SetFocus on the second textarea</button>
<div class="posts">
<div class="post">
<textarea #textarea1 [(ngModel)]="text" class="comment-text" name="text"></textarea>
</div>
<button (click)="textarea1.focus() ; textarea2.focus=false">SetFocus on the first textarea</button>
<br><br>
<div class="post">
<textarea #textarea2 [(ngModel)]="text" [hidden]="!show" class="comment-text" name="text"></textarea>
{{ textarea2.focus() }}
</div>
<button (click)= "show = !show " >SetFocus on the second textarea</button>
</div>
Related
I'm using <iframe name="votar" style="display:none;"></iframe>
To submit the form without without redirecting the tab, but the "Type something..." field is not
is not displayed again when submitted.
The submit button is <button class="login100-form-btn"> submit </button>
And I already tried with <button class="login100-form-btn" type="reset"> submit </button>
What clears the field but does not submit the form
I also got the idea to put a link when pressed to send.
The page reloads the field comes back empty but the form is not submitted, doing so
<button class="login100-form-btn">submit</button>
Also tried using <meta http-equiv="refresh" content="5; url=http://www.pseudo.link">
what made the page at a given second refresh all the time
<div class="limiter">
<div class="container-login100" style="background-image: url('images/bg-01.jpg');">
<div class="wrap-login100 p-l-55 p-r-55 p-t-65 p-b-54">
<iframe name="votar" style="display:none;"></iframe>
<form action="https://docs.google.com/forms/d/e/.../formResponse" target="votar">
<span class="login100-form-title p-b-49">Make a comment.</span>
<div class="wrap-input100 validate-input m-b-23" data-validate="Username is reauired">
<input class="input100" type="text" name="entry.???" placeholder="Type something...">
</div>
<div class="container-login100-form-btn">
<div class="wrap-login100-form-btn">
<div class="login100-form-bgbtn"></div>
<button class="login100-form-btn">submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
Just added to the <form> a onsubmit='this.submit();this.reset();return false;'
<div class="limiter">
<div class="container-login100" style="background-image: url('images/bg-01.jpg');">
<div class="wrap-login100 p-l-55 p-r-55 p-t-65 p-b-54">
<iframe name="votar" style="display:none;"></iframe>
<form action="https://docs.google.com/forms/d/e/.../formResponse" target="votar" onsubmit='this.submit();this.reset();return false;'>
<span class="login100-form-title p-b-49">Make a comment.</span>
<div class="wrap-input100 validate-input m-b-23" data-validate="Username is reauired">
<input class="input100" type="text" name="entry.???" placeholder="Type something...">
</div>
<div class="container-login100-form-btn">
<div class="wrap-login100-form-btn">
<div class="login100-form-bgbtn"></div>
<button class="login100-form-btn">submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
You need to add a script.js file or javascript code into your file where you have to write code to submit the form.
And there write submit function with .reset() property and don't prevent the default form action in that code
I want to show an section when the checkbox is checked on another section, and show it with an animation from the top. I have the following code for the input that is in another section .
<div className="continue" id="first">
<button className="btn-continue">
Contratar Plano
<input type="checkbox" id="reveal-email" role="button"/>
</button>
</div>
<section className="plan-section" id="plan-section">
<div className="next">
<i class="arrow down"></i>
</div>
<div className="form-block">
<form className="form">
<div className="plan-form">
<div className="input-block">
<label htmlFor="name">Nome</label>
<input type="text" name="name" id="name" onChange={props.handleChange} required className="input" />
</div>
<div className="continue">
<button className="btn-continue" id="plan-continue" disabled={props.step.isLast()} onClick={props.next}>
<span className="btn-text">Contratar Plano</span>
<img className="check-btn" src={check} />
</button>
</div>
</div>
</form>
</div>
</section>
Also showing the section I need to show; this section has a default display:none.
Its a classic JS task. Use an onclick event to check if the checkbox is checked and then to change the section from display: none to display: block . Also Add an onclick event so that JS is triggered.
function showSection() {
var showSection = document.getElementById("reveal-email"),
planSection = document.getElementById("plan-section");
if (showSection.checked == true) {
planSection.style.display = "block";
} else {
planSection.style.display = "none";
}
}
#plan-section {
display: none;
}
<div className="continue" id="first">
<button className="btn-continue">Contratar Plano
<input type="checkbox" id="reveal-email" onclick="showSection()">
</button>
</div>
<section className="plan-section" id="plan-section">
<div className="next">
<i class="arrow down"></i>
</div>
<div className="form-block">
<form className="form">
<div className="plan-form">
<div className="input-block">
<label htmlFor="name">Nome</label>
<input type="text" name="name" id="name" onChange={props.handleChange} required className="input" />
</div>
<div className="continue">
<button className="btn-continue" id="plan-continue" disabled={props.step.isLast()} onClick={props.next}>
<span className="btn-text">Contratar Plano</span>
<img className="check-btn" src={check} />
</button>
</div>
</div>
</form>
</div>
</section>
One recommendation regarding your code:
<button className="btn-continue">
Contratar Plano
<input type="checkbox" id="reveal-email" role="button"></input>
</button>
It's not a good practice to group checkbox and some text into button, in HTML you can use label for that.
If JS solution is acceptable, you need to follow these steps:
Find your checkbox button and section in the DOM
Add event listener which will trigger callback function after each change of the checkbox state
In the callback function you need to trigger style for your section.
The full code is below:
var checkbox = document.getElementById('reveal-email');
var section = document.getElementById('plan-section');
checkbox.addEventListener('change', onChange)
function onChange() {
if (this.checked) {
section.style.display = "block";
} else {
section.style.display = "none";
}
}
<div className="continue" id="first">
<button className="btn-continue">
Contratar Plano
<input type="checkbox" id="reveal-email" role="button"/>
</button>
</div>
<section className="plan-section" id="plan-section" style="display:none">
<div className="next">
<i class="arrow down"></i>
</div>
<div className="form-block">
<form className="form">
<div className="plan-form">
<div className="input-block">
<label htmlFor="name">Nome</label>
<input type="text" name="name" id="name" onChange={props.handleChange} required className="input" />
</div>
<div className="continue">
<button className="btn-continue" id="plan-continue" disabled={props.step.isLast()} onClick={props.next}>
<span className="btn-text">Contratar Plano</span>
<img className="check-btn" src={check} />
</button>
</div>
</div>
</form>
</div>
</section>
I've got a problem with my ngSwitchCase. Well the problem is that the case doesn't correctly fulfill its job. When I drag and drop a textbox, a textbox should appear. But When I drop the textbox, I get a textbox and textarea, which is another ngSwitchCase. Does anyoneknow what I'm doing wrong, because I can't seem to figure it out.
formadd.component.html
<fieldset class="element">
<legend class="voeg-element" placeholder="voeg element toe" cdkDropList
#doneList="cdkDropList"
[cdkDropListData]="done"
(cdkDropListDropped)="drop($event)">
<div [ngSwitch]="item" class="cdkdrag" *ngFor="let item of done" cdkDrag>
<div *ngSwitchCase="Textbox">
<input kendoTextBox>
</div>
<div *ngSwitchCase="Textarea">
<textarea kendoTextArea></textarea>
</div>
<div *ngSwitchDefault>{{item}}</div>
</div>
</legend>
</fieldset>
panelwrapper.component.html
<kendo-panelbar class="panelbar">
<kendo-panelbar-item class="panelbar-een" [title]="'Elementen'" cdkDropList cdkDropListSortingDisabled>
<kendo-panelbar-item class="panelbar-twee" [title]="'Categorie'" icon="custom-icon" cdkDrag [cdkDragData]="'Categorie'"></kendo-panelbar-item>
<kendo-panelbar-item class="panelbar-drie" [title]="'Textbox'" icon="textbox" cdkDrag>
<kendo-textbox-container floatingLabel="Text Box 1">
<input kendoTextBox placeholder="test" *cdkDragPreview/>
</kendo-textbox-container>
</kendo-panelbar-item>
<kendo-panelbar-item class="panelbar-vier" [title]="'Textarea'" icon="textarea" cdkDrag [cdkDragData]="'Textarea'"></kendo-panelbar-item>
<kendo-panelbar-item class="panelbar-vijf" [title]="'Date'" icon="calendar-date" cdkDrag [cdkDragData]="'Date'"></kendo-panelbar-item>
</kendo-panelbar>
This is what I see when I drop the textbox into the fieldset:
You will need to use single quotation marks inside of a *ngSwitchCase.
E.g:
<fieldset class="element">
<legend class="voeg-element" placeholder="voeg element toe" cdkDropList
#doneList="cdkDropList"
[cdkDropListData]="done"
(cdkDropListDropped)="drop($event)">
<div [ngSwitch]="item" class="cdkdrag" *ngFor="let item of done" cdkDrag>
<div *ngSwitchCase="'Textbox'">
<input kendoTextBox>
</div>
<div *ngSwitchCase="'Textarea'">
<textarea kendoTextArea></textarea>
</div>
<div *ngSwitchDefault>{{item}}</div>
</div>
</legend>
</fieldset>
I got the problem that i got 2 ng-clicks but only one works. when I reload the page always only one button works the other not. for this i use angularjs, HTML and Css.
the first click:
<img class="cClickable" ng-click="addPassword()" src="plus.svg">
AngularJS:
$scope.addPassword = function() {
var newPassword = {
Id: null,
Name: '',
Passwort: '',
Beschreibung: '',
Category: []
}
$scope.editPassword(newPassword);
$scope.titlePopup = "Neues Passwort hinzufügen";
}
$scope.editPassword = function(password) {
$scope.currentPassword = angular.copy(password);
$scope.isShownEdit = true;
$scope.titlePopup = "Passwort bearbeiten";
}
the second button:
<img class="cClickable cTableImgedit" ng-click="editPassword(item)" src="pencil.svg">
when i click the button a popup is in the front.
the images are existing.
this is the popup.
<div class="backgroundOverlay cShow" ng-show="isShownEdit">
<div class="dropDown positionPopUp inpuBlock" id="add">
<div class="inputBlock">
<h1 class="popupTitle">{{titlePopup}}</h1>
<div>
<div class="cClearFloat cInputSpace">
<input placeholder="Name" ng-model="currentPassword.Name">
</div>
<div class="cClearFloat cInputSpace">
<input placeholder="Passwort" ng-model="currentPassword.Passwort">
</div>
<div class="cClearFloat cInputSpace">
<input placeholder="Beschreibung" ng-model="currentPassword.Beschreibung">
</div>
<div class="cClearFloat cInputSpace">
<div class="divSmall">
<label class="inputDropdownPlaceholder">Kategorien</label>
<div class="divOptions" ng-repeat="item in categories">
<label class="labelDropDown"><input type="checkbox" class="inputDropDown" ng-model="item.isChecked" ng-checked="checkedCategory(item)" ng-init="item.isChecked = checkedCategory(item)" ng-change="changedCategory(item)">{{item.Label}}</label><br>
</div>
</div>
<div class="cClearFloat cButtons">
<button class="cButtonSpeichern" ng-click="showAlertPassword()">Speichern</button>
<button class="cButtonAbbrechen" ng-click="isShownEdit= false">Abbrechen</button>
</div>
</div>
</div>
</div>
</div>
</div>
when i click on the images the popup comes into the front.
I am new to Backbone JS and Question could be duplicate but I am not able to figure out the Problem. I need to handle form submit event in my application to use the default HTML5 validation. but unfortunately it's not working for me. below In securityTokenTmpl and securityQATmpl, i have form with submit button which is not firing submit event but click working fine.
view---------
var securityInfoView = Backbone.View.extend({
tagName : 'div',
className : 'security-info-wrap',
initialize : function() {
var self = this;
$('.application-content-wrap').append(self.$el);
this.$el.append(securityInfoTmpl(self.options.result.bankInfo.siteModel));
if (typeName === "TOKEN_ID" || typeName === "MULTI_LEVEL") {
self.$el.find('.security-info-wrap .content-wrap').html(securityTokenTmpl({
results : data
}));
}
if (typeName === "SECURITY_QUESTION") {
self.$el.find('.security-info-wrap .content-wrap').html(securityQATmpl({
results : data
}));
}
},
events : {
'submit' : 'submit'
},
submit : function(e) {
console.log("form submit");
e.preventDefault();
// there after HTML5 validation i want to make Rest call
}
});
securityQATmpl Template
{{#results}}
<div>
<form id="securityQA" method="POST">
<div class="row">
{{#fieldInfo}}
{{#questionAndAnswerValues}}
<div class="small-12 columns"><label class="addAccountLabel">{{question}}</label>
<input required type='{{responseFieldType}}' name='{{metaData}}'/>
</div>
{{/questionAndAnswerValues}}
{{/fieldInfo}}
</div>
</div>
<div class="row">
<div class="small-9 columns"></div>
<div class="small-3 columns"><input type="submit" class="button" value="Next"/>
</div>
</div>
</form>
<div class="clear"></div>
{{/results}}
securityTokenTmpl Template
{{#results}}
<div>
<form id="securityToken" method="POST">
{{#fieldInfo}}
<div class="row">
<div class="small-12 columns"><label class="addAccountLabel">{{displayString}}</label>
<input required type='{{responseFieldType}}' size='{{maximumLength}}' name="securityToken"/>
</div>
{{/fieldInfo}}
</div>
</div>
<div class="row">
<div class="small-9 columns"></div>
<div class="small-3 columns"><input type="submit" class="button" value="Next" /></div>
</form>
{{/results}}
There was an error in Templates i had a div in template which i was opening before form opening tag and closing before form closing tag it should be closed after form closing tag.
{{#results}}
<div>
<form id="securityToken" method="POST">
{{#fieldInfo}}
<div class="row">
<div class="small-12 columns"><label class="addAccountLabel">{{displayString}}</label>
<input required type='{{responseFieldType}}' size='{{maximumLength}}' name="securityToken"/>
</div>
</div>
{{/fieldInfo}}
<div class="row">
<div class="small-9 columns"></div>
<div class="small-3 columns"><input type="submit" class="button" value="Next" /></div>
</div>
</form>
</div>
{{results}}