When i press the Date control,
and i do not enter a date,
I click Esc ==> The Date control does not disappear
I click outside ==> The Date control does not disappear
here my code html and ts :
<input class="cssInputDate" type="text" id="dateDebut" name="dateDebut"
#dateDebut="ngModel"
(keyup)="onKeyUp($event)"
(blur)="checkDateDebut()"
required [ngModel]="dateDebutModel" (ngModelChange)="dateDebChange($event)" ngbDatepicker #ddeb="ngbDatepicker" >
<button tabindex="3" (click)="ddeb.toggle(); openDatepicker(ddeb)" type="button" style="margin-left: 0;" *ngIf="modificationMode" >
<i class="fa fa-calendar" aria-hidden="true"></i>
</button>
here the .ts :
openDatepicker(id){
console.log(" id =",id);
console.log(" dateDebInput =",this.dateDebInput);
this.dynamicId = id;
}
onClick(event) {
if(this.dynamicId == undefined){
console.log("Dynamic id ===",this.dynamicId);
}
else if(!this._eref.nativeElement.contains(event.target)) {
this.dateDebInput.close();
}
}
here the console log output :
any solution ?
i find a solution
i use #HostListener here the code :
#HostListener('mousedown', ['$event'])
mouseEvent(event) {
if(event.target.offsetParent.tagName !== 'NGB-DATEPICKER'){
this.dateDebInput.close();
}
}
same of escape :
#HostListener('window:keyup', ['$event'])
keyEvent(event: KeyboardEvent) {
if (event.key === "Escape") {
this.dateDebInput.close();
}
}
ere the code of checkDateDebut :
checkDateDebut() {
const check = this.dateDebutModel != null && this.dateDebutModel !== '';
const checkFinAfterDebut = this.checkDateFinAfterDateDebut();
if (!check) {
this.pushMessageFront('DIAG_ERR_029');
} else {
this.spliceMessageFront('DIAG_ERR_029');
}
if (!check || !checkFinAfterDebut) {
this.highlight('dateDebut', true);
} else {
this.highlight('dateDebut', false);
}
return check && checkFinAfterDebut;
}
the css :
.cssInputDate{
min-width: 85px;
}
Related
im trying to make and the same event fire every time but it only fires once when i click "del" button
HTML
<input type="text" name="todoInput" id="todoInput">
<button class="btn">Add</button><br>
<p class="error"></p>
<div>
<ul class="todos"></ul>
</div>
jQuery
var todos = [];
$(".btn").click(function() {
if ($("#todoInput").val().length != 0) {
todos.push($("#todoInput").val());
$("#todoInput").val("");
console.log("Novi array:", todos);
$(".todos").html("");
$(todos).each(function(index, val) {
$(".todos").append(`<li value=${val}>${val}<button class="del" value=${index}>del</button></li>`);
});
**$(".del").click(function() {
todos.splice($(this).val(), 1);
$(".todos").html("");
$(todos).each(function(index, val) {
$(".todos").append(`<li value=${val}>${val}<button class="del" value=${index}>del</button></li>`);
});**
});
} else {
$(".error").text("Molimo unesite vrijednost.");
console.log("Trenutni array:" ,todos);
}
});
$("#todoInput").on("input", function() {
if ($("#todoInput").val().length != 0 && $(".error").text("Molimo unesite vrijednost.")) {
$(".error").text("");
}
});
im trying to make and the same event fire every time but it only fires once when i click "del" button
The issie you have is that the (".del").click(function() { function is not running repeatedly and therefore not binding the onclick handler to it.
Perhaps an alternative method would be to create the delete function and pass in the the index of the item to delete, see below snippet:
let todos = [];
function buildItems() {
if (todos.length > 0) {
$(".todos").html("");
$(todos).each(function(index, val) {
$(".todos").append(`<li value=${val}>${val}<button class="del" onclick="deleteItem(${index});" value=${index}>del</button></li>`);
})
} else {
$(".todos").html("");
}
}
function deleteItem(index) {
todos.splice(index, 1);
buildItems();
}
$(".btn").click(function() {
if ($("#todoInput").val().length != 0) {
todos.push($("#todoInput").val());
$("#todoInput").val("");
// console.log("Novi array:", todos);
buildItems()
} else {
$(".error").text("Molimo unesite vrijednost.");
console.log("Trenutni array:", todos);
}
});
$("#todoInput").on("input", function() {
if ($("#todoInput").val().length != 0 && $(".error").text("Molimo unesite vrijednost.")) {
$(".error").text("");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="todoInput" id="todoInput">
<button class="btn">Add</button><br>
<p class="error"></p>
<div>
<ul class="todos"></ul>
</div>
We actually use on/off click to make sure the click triggers the event.
$(".btn").off ('click').on('click',function() {...}
I have a title that the user can modify thanks to contenteditable.
I want that when the user presses enter this validates the title instead of passing a line.
<div class="panel-participants-title"
*ngIf="thread.title !== '' ">
<div class="panel-title"
contenteditable="true">
{{thread.title.substring(1)}}
</div>
</div>
.panel-participants-title:hover > *[contenteditable="true"] {
background: #989898;
}
.panel-participants-title > *[contenteditable="true"] {
outline: 0;
}
/////UPDATE
<div class="panel-participants-title">
<div class="panel-title"
contenteditable="true"
(keypress)= "validateTitle($event)">
{{thread.title.substring(1)}}
</div>
</div>
validateTitle(event: any): void {
if(event.keyCode===13) {
document.getElementById("panel-title").submit();
}
}
////////UPDATE2
validateTitle(event: any): void {
if(event.keyCode===13) {
event.preventDefault();
event.stopPropagation();
event.submit();
}
}
Here is a working example of the fiddle, in case it shuts down :)
document.querySelector('#id1').addEventListener('keypress', function (e) {
var key = e.which || e.keyCode;
if (key === 13) { // 13 is enter
var text = document.getElementById("id1").value;
if (text.includes("w")) {
alert("Omg, the string contains a W, try again");
} else {
document.getElementById("id1").blur();
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Input Field <input id="id1" type="text" name="fname">
onKeyPress="if(event.keyCode == 13) validerForm();"
and
function validerForm(){
document.getElementById("formulaire").submit();
}
Normally that's what you're trying to do. Basically when key number 13 (the Enter key) and presses it launches a function that will validate the form.
What is the event to handle "enter" or "go" keyboard key on an input?
The input is not used within a form. So clicking on it will not "submit". I just need the event.
(Running android + Ionic 2 on Beta 11)
I did like this:
<ion-input type="text" [(ngModel)]="username" (keyup.enter)="handleLogin()"></ion-input>
And:
handleLogin() {
// Do your stuff here
}
For my case, I'm not getting next button within a form for both Android and IOS. I'm only getting done. so I handled done as a next by using following directive.
import { Directive, HostListener, Output, EventEmitter, ElementRef, Input } from '#angular/core';
import { Keyboard } from '#ionic-native/keyboard';
#Directive({
selector: '[br-data-dependency]' // Attribute selector
})
export class BrDataDependency {
#Output() input: EventEmitter<string> = new EventEmitter<string>();
#Input('br-data-dependency') nextIonInputId: any = null;
constructor(public Keyboard: Keyboard,
public elementRef: ElementRef) {
}
#HostListener('keydown', ['$event'])
keyEvent(event) {
if (event.srcElement.tagName !== "INPUT") {
return;
}
var code = event.keyCode || event.which;
if (code === TAB_KEY_CODE) {
event.preventDefault();
this.onNext();
let previousIonElementValue = this.elementRef.nativeElement.children[0].value;
this.input.emit(previousIonElementValue)
} else if (code === ENTER_KEY_CODE) {
event.preventDefault();
this.onEnter();
let previousIonElementValue = this.elementRef.nativeElement.children[0].value;
this.input.emit(previousIonElementValue)
}
}
onEnter() {
console.log("onEnter()");
if (!this.nextIonInputId) {
return;
}
let nextInputElement = document.getElementById(this.nextIonInputId);
// On enter, go to next input field
if (nextInputElement && nextInputElement.children[0]) {
let element: any = nextInputElement.children[0];
if (element.tagName === "INPUT") {
element.focus();
}
}
}
onNext() {
console.log("onNext()");
if (!this.nextIonInputId) {
return;
}
let nextInputElement = document.getElementById(this.nextIonInputId);
// On enter, go to next input field
if (nextInputElement && nextInputElement.children[0]) {
let element: any = nextInputElement.children[0];
if (element.tagName === "INPUT") {
element.focus();
}
}
}
}
const TAB_KEY_CODE = 9;
const ENTER_KEY_CODE = 13;
How to use?
<form [formGroup]="loginForm" (ngSubmit)="login(loginForm.value)">
<ion-input br-data-dependency="password" type="text" formControlName="username" placeholder="USERNAME" (input)="userNameChanged($event)"></ion-input>
<ion-input id="password" password type="password" formControlName="password" placeholder="PASSWORD"></ion-input>
<button submit-button ion-button type="submit" block>Submit</button>
</form>
Hope this help someone!!
Edit: Let me know if you are abled to show next button for the first input box?
The right way to do that might be to use Ionic2 forms. I'v found this: https://blog.khophi.co/ionic-2-forms-formbuilder-and-validation/
Otherwise - If you "just want the "Enter" event handler" this is quite complex (!) and not out of the box as you might be thinking:
HTML:
<ion-input id="myInput" #myInput type="submit" [(model)]="textValue" (input)="setText( $event.target.value )" placeholder="Send Message ..." autocorrect="off"></ion-input>
TS:
...
declare let DeviceUtil: any;
...
export class Component_OR_PAGE
{
public textValue: string;
#ViewChild( 'myInput') inputElm : ElementRef;
#HostListener( 'keydown', ['$event'] )
keyEvent( e )
{
var code = e.keyCode || e.which;
log.d( "HostListener.keyEvent() - code=" + code );
if( code === 13 )
{
log.d( "e.srcElement.tagName=" + e.srcElement.tagName );
if( e.srcElement.tagName === "INPUT" )
{
log.d( "HostListener.keyEvent() - here" );
e.preventDefault();
this.onEnter();
DeviceUtil.closeKeyboard();
}
}
};
...
setText( text )
{
log.d( "setText() - text=" + text );
this.textValue = text;
}
onEnter()
{
console.log( "onEnter()" );
this.inputText.emit( this.textValue );
this.textValue = "";
// ionic2 beta11 has issue with data binding
let myInput = document.getElementById( 'myInput' );
let innerInput: HTMLInputElement = <HTMLInputElement>myInput.children[0];
innerInput.value = "";
}
}
JS:
DeviceUtil =
{
closeKeyboard: function()
{
cordova.plugins.Keyboard.close();
}
}
I am using clickedit plugins that edit the label and output the edited text. What I am aiming to do is format the output after clicking and editing the label.
HTML:
<p class="text-center">
<font size="5" color="#38283C">
<b><i><span id="mto-num-detail">KTR-2-KTR2-PR-C-00002</span></i></b>
</font>
</p>
<input class="form-control clickedit" type="text"/>
JavaScript:
// EDIT ON CLICK
var defaultText = 'Click To Input Custom PO Number';
function endEdit(e) {
var input = $(e.target),
p = input && input.prev();
p.text(input.val() === '' ? defaultText : input.val());
input.hide();
p.show();
}
$('.clickedit').hide()
.focusout(endEdit)
.keyup(function (e) {
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
endEdit(e);
return false;
} else {
return true;
}
})
.prev().click(function () {
$(this).hide();
$(this).next().show().focus();
});
My question is how do I generate the same format as the initial text?
You can create a class in css like
.color-text{ color : #F00;}
And in click event add this class.
$('selector').addClass('color-text');
I am trying to show a popover when the CAPS lock key is on during typing password, the code is working fine, the popover is displayed when CAPS is on and is hidden when it is not. But I'm also getting the popover when I click on the password field, even if the caps is not on.
I need some help with this.
<input rel="popover" data-placement="right" data-content="CAPS IS ON" type="password" id="txtPassword" name="password" class="input-xlarge" value="" size="20" />
<script type="text/javascript">
jQuery('#txtPassword').keypress(function(e) {
var s = String.fromCharCode( e.which );
if ( s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey ) {
jQuery('#txtPassword').popover('show');
}
else {
jQuery('#txtPassword').popover('hide');
};
});
</script>
TRY
UPDATE
HTML
Type Here:<br><input type="text" id="textbox"><br>On each keypress I will tell if caps lock is on<br><br> CAPS LOCK: <span id="cap"></span>
JQUERY
//<![CDATA[
$(window).load(function(){
$('#textbox').keypress(function(e) {
var s = String.fromCharCode( e.which );
if (s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey) {
$('#cap').removeClass('red').addClass('green').html('ON');
} else {
$('#cap').removeClass('green').addClass('red').html('OFF');
}
});
});//]]>
css
.red {
color: red;
font-weight:bold;
}
.green {
color: green;
font-weight:bold;
}
Update Answer: to detect Capital letter
Here is the DEMO http://jsfiddle.net/yeyene/Z52Az/4/
Use this script,
$('#txtPassword').keyup(function () {
var character = $('#txtPassword').val();
var lastChar = character.substr(character.length - 1);
if (lastChar == lastChar.toUpperCase()) {
alert ('You typed capital letter!');
}
});