I am trying to remove any white space while a user in entering something into the input box. I tried having three separate methods at first: regex to remove spaces when text is pasted, one for when the space bar is pressed, and a simple trim. NOTE: it is required that I use class to call methods. Not sure where to go from here... I appreciate the help!
(function () {
class Digit {
// when user enters keys, do not allow spaces
method2(userInput) {
console.log({userInput});
console.log("formatInput");
const input = userInput.target.value;
console.log(input.length);
if (!input.length) return;
if (userInput.which === 32) { // 32 is space key
console.log("this is a space");
userInput.value = this.method1();
}
}
method1() {
console.log("trimthis input");
return userInput.trim();
}
// when user pastes input remove spaces
method3() {
console.log("formatPaste");
const reg = new RegExp(/\s+/, "");
console.log(this.userInput);
return this.userInput.replace(reg, "");
}
}
const userInput = document.querySelector("#inputNumber");
console.log("User inputs", {userInput});
const digitObject = new Digit();
console.log(digitObject);
userInput.addEventListener("keyup", function() { digitObject.method2(); }, false);
digitObject.method3();
}());
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Numbers App</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,500" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- ASSIGNMENT: create page where user can type/save numbers only, css grid -->
<div class="wrapper">
<!-- simple form with number input and submit function, auto trim spaces -->
<form>
<div class="form">
<div>
<input class="input--number has-float-label go-bottom Digit" id="inputNumber" placeholder="Enter Number" type="text" required />
<label for="inputNumber">Input</label>
</div>
<div class="btn--group">
<input type="button" value="Post" class="btn post" title="Post">
<input type="button" value="Clear" class="btn clear" title="Clear">
</div>
</div>
</form>
<!-- saved numbers table with date submitted -->
<!---->
</div> <!-- end wrapper -->
<!-- footer -->
<!-- Javascript -->
<script src="script.js"></script>
</body>
</html>
Use the event input to capture every kind of changes and the following regexp / /g
document.getElementById('textfield').addEventListener('input', function() {
this.value = this.value.replace(/ /g, '');
});
<input id='textfield'>
Related
I am trying to create a prompt dialog box using alertifyjs that has multiple input boxes. I have managed to create the dialog box to show the multiple boxes but I cant seem to make a reference to the inputs that user provides.
I want to write if statement that carries out action based on user input when they press OK. However, the OK button doesnt seem to be working and also the if-statements don't work as well. I am not sure what I might be doing wrong, can someone please help me.
Below is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs#1.11.1/build/css/alertify.min.css"/>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs#1.11.1/build/css/themes/bootstrap.min.css"/>
<script src="//cdn.jsdelivr.net/npm/alertifyjs#1.11.1/build/alertify.min.js"></script>
</head>
<body>
<div style="display:none;" >
<div id="dlgContent">
<p> Enter Value One </p>
<input class="ajs-input" id="inpOne" type="text" value="Input One Default Value"/>
<p> Enter Value Two </p>
<input class="ajs-input" id="inpTwo" type="text" value="Input two default Value"/>
</div>
</div>
<!-- the script -->
<script>
var dlgContentHTML = $('#dlgContent').html();
$('#dlgContent').html("");
alertify.confirm(dlgContentHTML).set('onok', function(closeevent, value) {
var inpOneVal = $('#inpOne').val();
var inpTwoVal = $('#inpTwo').val();
updateListItems(inpOneVal,inpTwoVal);
if (inpOneVal == "test" && inpTwoVal == "test") {
alertify.success('Successful');
} else {
alertify.error('Wrong')
}
}).set('title',"Update");
</script>
</body>
</html>
Link to JSfiddle: http://jsfiddle.net/1qouxdkc/4/
In your script you call a function named updateListItems(inpOneVal,inpTwoVal);
As that function is not declared anywhere, it errors, so with that temporarily commented out, it works.
Stack snippet
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/alertifyjs#1.11.1/build/css/alertify.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/alertifyjs#1.11.1/build/css/themes/bootstrap.min.css" />
<script src="https://cdn.jsdelivr.net/npm/alertifyjs#1.11.1/build/alertify.min.js"></script>
</head>
<body>
<div style="display:none;">
<div id="dlgContent">
<p> Enter Value One </p>
<input class="ajs-input" id="inpOne" type="text" value="Input One Default Value" />
<p> Enter Value Two </p>
<input class="ajs-input" id="inpTwo" type="text" value="Input two default Value" />
</div>
</div>
<!-- the script -->
<script>
var dlgContentHTML = $('#dlgContent').html();
$('#dlgContent').html("");
alertify.confirm(dlgContentHTML).set('onok', function(closeevent, value) {
var inpOneVal = $('#inpOne').val();
var inpTwoVal = $('#inpTwo').val();
//updateListItems(inpOneVal,inpTwoVal);
if (inpOneVal == "test" && inpTwoVal == "test") {
alertify.success('Successful');
} else {
alertify.error('Wrong')
}
}).set('title', "Update");
</script>
</body>
</html>
I have the following html page that seeks to check for keywords in text input and return a score depending on how many keywords are entered. For instance, if two keywords are returned, the score would be 2, and if the answer contains no keywords, then a score of 0 would be returned.
In the example below two accepted keywords have been used (e.g. good and eternal) and therefore the user would receive a score of 2.
I've made an attempt (a beginner to JS) but would appreciate some help.
UPDATE: The javascript i have used nearly works (to search for multiple keywords) but doesnt display the showscore variable correctly each time.
This is what I have so far:
<script>
document.getElementById('longanswer').addEventListener('input', function(e){
let keyword = e.target.value;
document.getElementById('greeting').innerHTML = "Just write this";
});
function displayScore() {
var showscore = 0;
var answer = document.getElementById('longanswer').value;
var keyword1="eternal";
var keyword2="good";
var keyword3="true";
if (answer.indexOf(keyword1)!=-1){
showscore=showscore+1
document.getElementById("displayscore").innerHTML = showscore;
} else if (answer.indexOf(keyword1)!=-1 & answer.indexOf(keyword2)!=-1){
showscore=showscore+2
} else if (answer.indexOf(keyword1)!=-1 & answer.indexOf(keyword2)!=-1 & answer.indexOf(keyword3)!=-1){
showscore=showscore+3
} else {
showscore=0
}
document.getElementById("displayscore").innerHTML = showscore;
}
</script>
The interface is below:
Whole code that can be easily re-created below:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Long Answer Question & Answers</title>
</head>
<body>
<form>
<h1> Q and A </h1>
<div class="form-group">
<label for="longanswer">What is the meaning of life?:</label><br>
<textarea rows="4" cols="100" id="longanswer">
</textarea>
<br>
<button onclick="displayScore()" type="button" class="btn btn-success">Submit</button>
</div>
</form>
<div class="card border-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Score</div>
<div class="card-body text-primary">
<h5 class="card-title">Generating a score for your answer</h5>
<p class="card-text" id="displayscore">Once you've clicked submit we will display your score for this answer here.</p>
</div>
</div>
<script>
document.getElementById('longanswer').addEventListener('input', function(e){
let keyword = e.target.value;
document.getElementById('greeting').innerHTML = "Just write this";
});
function displayScore() {
var showscore;
var answer = document.getElementById('longanswer').value;
var keyword1="eternal";
var keyword2="good";
if (answer.indexOf(keyword1)!=-1)
{
showscore="found"
}
document.getElementById("displayscore").innerHTML = showscore;
}
</script>
To have it more dynamic, I'd use a new RegExp in which you can check the text; the length of match' result will be the score
let keywords = new RegExp("(" + ["foo", "bar", "baz"].join('|') + ")", 'gi');
document.getElementById('btn').addEventListener('click', e => {
document.getElementById('score').innerHTML =
document.getElementById('foo').value.match(keywords).length;
});
<textarea id="foo"></textarea>
<button id="btn">
Check
</button>
<div id="score">
</div>
I am using bootstrap popover to display if password is less then 6 character.
It works fine but when I click in text it display popover even value of text box is valid. how to hide popover when length of text box is valid
<head>
<title>popover example</title>
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Bootstrap popover Example</h1>
<div>
<input type="password" id="password1" placeholder="password" data-toggle="popover" >
</div>
</div>
Here is my js code I remove div with popover when length is valid . But problem is text box displays popup when I click in text . I want to display popover only when length is less then 6 .
<script>
$(function ()
{
debugger;
$('#password1').blur(function(){
debugger;
if($('#password1').val().length<6){
$("#password1").popover({
title:"test",
content:"Must be 6 characters long! Must contain a capital letter"
});
$("#password1").popover('show');
}else{
$("#password1").parent().removeClass('popover');
}
});
})();
</script>
Thanks for your help.
You should use the hide function of popover
$("#password1").popover('hide')
Use .popover('destroy') instead of .popover('hide') since if you click again on the textbox, it will keep showing you again even if the characters are more than 6.
$(function() {
debugger;
$('#password1').blur(function() {
debugger;
if ($('#password1').val().length < 6) {
$("#password1").popover({
title: "test",
content: "Must be 6 characters long! Must contain a capital letter"
});
$("#password1").popover('show');
} else {
$("#password1").popover('destroy');
}
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
<h1>Bootstrap popover Example</h1>
<div>
<input type="password" id="password1" placeholder="password">
</div>
</div>
Please check this
$(function ()
{
debugger;
$('#password1').blur(function(){
debugger;
if($('#password1').val().length<6){
$("#password1").popover({
title:"test",
content:"Must be 6 characters long! Must contain a capital letter"
});
$("#password1").popover('show');
}else{
$("#password1").popover('destroy');
}
});
$('#password1').click(function(){
if($('#password1').val().length>5){
$("#password1").popover('destroy');
}
});
})();
Javascript noob here :)
I have a basic Angular web page that adds input to a list when the "add" (submit) button is clicked. If, however, I submit by pressing the ENTER key, Angular does not recognise that the input field is dirty, and it fails to update the model ($scope.newFundName) - so the old value (initially "") is added to the list. If I move focus away from the field and back again (say TAB, then BACKTAB) then Angular picks up the correct value. How do I force it to use the current value of the input field without manually shifting the focus?
My code:
<!doctype html>
<html ng-app> <!-- test004.html -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="../angular-1.0.0rc3.min.js"></script>
<script type="text/javascript">
function testController004($scope) {
$scope.funds = [{code:1 ,name:'Alpha'}
,{code:2 ,name:'Bravo'}
,{code:3 ,name:'Charlie'}];
$scope.getFundCount = function () { return $scope.funds.length; }
$scope.addFund = function () {
// if triggered by ENTER, and focus hasn't left a dirty input field, new value won't be picked up
$scope.funds.push({code:$scope.newFundCode,name:$scope.newFundName});
}
}
</script>
</head>
<body>
<div ng-controller="testController004" class="container">
<label># Funds: {{getFundCount()}}</label>
<ul>
<li ng-repeat="F in funds">
<span>{{F.code}}={{F.name}}</span>
</li>
</ul>
<form role="form" class="form-inline">
<label for="eFundCode">Code</label>
<input id="eFundCode" type="text" class="form-control" ng-model="newFundCode" />
<label for="eFundName">Name</label>
<input id="eFundName" type="text" class="form-control" ng-model="newFundName" />
<button id="eAdd" class="btn btn-info" ng-click="addFund()">Add</button>
</form>
</div>
</body>
</html>
I want to be able to return a certain output in the div container whenever someone enters a number greater than 0 in the input textfield and hits the submit button. I am unsure of what I am doing incorrect. Any help would be greatly appreciated!
HTML
<!DOCTYPE html>
<html>
<head>
<title>Button Magic</title>
<link rel='stylesheet' type='text/css' href='Jquery.css'/>
<script type="text/javascript" src="Jquery.js"></script>
</head>
<body>
<!-- Input Field-->
<input type="text" id="first" maxlength="6" placeholder="0.00">
<!-- Span -->
<span>< Type here</span>
<!-- Submit -->
<button onclick="submitNumber()">Submit</button>
<!-- Output -->
<div id="textOutput">
Are you correct?
</div>
</body>
</html>
JAVASCRIPT
function submitNumber() {
textInput = document.getElementById('first');
textOutput = document.getElementById('textOutput');
if (textInput > 0) {
textOutput.innerHTML = 'Correct!';
} else {
textOutput.innerHTML = 'Incorrect!';
}
}
document.getElementById('first') returns a dom element, not the value of the input field, you need to read the value property of the input element
textInput = document.getElementById('first').value;
textOutput = document.getElementById('textOutput');
Demo: Fiddle
You need to check for the value of the DOM element in the variable textInput, you are checking for the element document.getElementById('first')) instead, you can get the value of the input element using the .value property:
if (textInput.value > 0) {
Demo