We Keep Coding

How to limit a dot string to only one character even when holding down a non-number key

I'm creating a input validation to allow only a numeric and dot input.
It does limit the dot character to one onkeypress but when holding down a non-number key it's not.
<input class="form-control" type="text" onkeyup="this.value=this.value.replace(/[^0-9.{1}$]/g, '').replace(/(\..*)\./g, '$1');" />
How can i limit the dot string to one even when holding down a non-number key?

You shouldn't need javascript here: use input with type number (see MDN). If the typed user input is invalid (it may contain more dots), the input has no value (check it with the button of the snippet). For example:
document.querySelector("button").addEventListener(
"click",
() => {
const val = document.querySelector("input").value;
console.log( val || "Invalid");
}
);
<input type="number" step="0.1" min="1" max="20" value="1.0">
<button>show value</button>

You can use
^(?=^[^.]*\.?[^.]*$).+$
<form>
<input type='text' pattern='^(?=^[^.]*\.?[^.]*$).+$'/>
<button typ='submit'>submit</button>
</form>
Note:- If you need one . to be must you can change above regex to
^(?=^[^.]*\.[^.]*$).+$

You could use <input type="number" /> or <input pattern="[0-9]*\.?[0-9] /> as the others have suggested.
However,
If you want to do it "manually"
You could use the onkeypress attribute. This is the event which fires for every repetition of a character. After firing this event, the browser updates the input value.
Canceling the event
If we return a false like such: onkeypress="return false", you will notice that the input value won't update anymore, no matter what key you press. We can even add a condition: onkeypress="if(event.key != '0') return false;". In this case, you will only be able to write 0s in the input.
So, this is the event during which we will have to check, and make up our mind if we are going to allow the newly pressed key to have an effect. We will return true or false accordingly. However, there is only one little problem.
Composing the new value
Before we are going to decide if we allow the newly pressed key to have an effect, we need to see what effect it would have. We need to see how the input value will look like after this event. So we are going to compute it. Right now, the input still contains the current (without the new character) value.
Implementation
The JavaScript function:
function checkNumber(input, event){
//- We have the old value in input, and the currently pressed key in event.key
//- So we have the compute the new to be value of the input, to check if it's correct
//- To do this, we break the text into an array of characters, and insert the key
//- at the cursor's position - Check on MDN what Array.prototype.splice() does
var newValue = input.value.split('');
newValue.splice(this.selectionStart, this.selectionEnd-this.selectionStart, event.key);
newValue = newValue.join(''); //- Put it back into string form
return /^[0-9]*\.?[0-9]*$/.test(newValue);
}
And to use it:
<input class="form-control" type="text" onkeypress="return checkNumber(this, event);" />

unable to fetch input from input field

I am not able to get the input, entered by the user, from the input field; please help me out with this.
I am not able to figure out what is wrong here.
var ftemp = document.getElementById("Farenheit").value;
<td>
<input type="number" id="Farenheit">
</td>
when entering value in input field in the web page, input value is not being fetched at all.
console.log-ing the variable just shows a blank line .

This line of code
var ftemp = document.getElementById("Farenheit").value;
gets you the current value of that input at the time that line of code gets executed.
It does not update when the user changes the inputs value.
If you want it to do just that, you need to add an event listener to the input element that executes whenever the input event occurs:
var ftemp;
document.getElementById("Farenheit").addEventListener('input', function() {
ftemp = this.value;
console.log(ftemp);
})
<input type="number" id="Farenheit">

Add an event listener to the input element.
document.querySelector('input').addEventListener('keyup',function() {
console.log(this.value);
});
<input type="number" id="Farenheit" >

cursor gets hidden and cannot type after window.find()

this is my input field:
<input type="text" id="searchField" [(ngModel)]='search'
(ngModelChange)='searchCalled()' class="input-text" placeholder="Filter by
Name">
and my function is:
searchCalled():any {
var text = this.search;
(<any>window).find(text);
}
after an alphabet is matched in window.find(), the cursor gets automatically hidden from the input field and I cannot type in the input field. I have to click it again in order to type. But if anything is not matched, the cursor remains there and the input field is still in focus. I have written separate functions on blur, and mouseleave to check whether it is getting blurred but it's not getting blurred which I have tested.
I tried using
document.getElementById('searchField').focus()
but it's not working.
I am using typescript in angular 4.
Any help would be appreciated.

Form number input not transferring to javascript as a variable

I want to use the input value of a form element in a javascript function. However when I declare the variable it doesn't pull the input value from the form. Instead the debugger is just saying; ""
My code is as follows.
HTML:
<input type="number" name="stack" id="stack" min="1" max="600" placeholder="Big Blinds" required>
Javascript:
var stack = document.getElementById("stack").value;
Any advice would be great. Thanks.

It seems like you are getting the value while the input element is still empty. Your code that sets the variable doesn't seem to be encapsulated inside of a function that is run at a time after the input element has had data inputted into it, so the code runs immediately.
You need to make sure that you are getting the value after a value has been inputted.
This is accomplished by adding an event handling function that fires at a particular time. There are a variety of events you can work with (keyup, keydown, input, the form's submit, a button click, etc.). Here's an example of getting the value when a button is clicked.
// Get a reference to the button that will trigger the event function
var btn = document.getElementById("btn");
// Get a reference to the input element (do this outside of the function that
// will need it so you don't wind up scanning the document for it over and over).
// Also, set the variable to the element itself, not a property of the element so
// that if you ever need a different property, you don't have to scan the document
// for the element again:
var input = document.getElementById("stack");
// If you intend to use the value of the element across several functions, declare a
// variable that will hold the value outside of all of them.
var stack = null;
// Set the button up to call a function when it gets clicked.
btn.addEventListener("click", function(){
// When clicked, get the value
stack = input.value;
// Do whatever you want with the stored value.
console.log(stack);
});
<input type="number" name="stack" id="stack" min="1" max="600" placeholder="Big Blinds" required>
<button id="btn">Get Value</button>

How to edit dynamic form fields to create a single hidden field comprised of the value of two fields

I need to send a form off to where a single hidden field is comprised of two of the other fields that will be dynamically populated by a user (post/zip code and first line of address) where after regular expression only the numbers remain "123|456".
I have attempted to start, using the code below, where I monitor the output in the console. I have managed to dynamically edit a textfield so that all that is shown are the numbers but this is not suitable for a user. So I was trying to store the edited textfield data into the hidden field whilst leaving the complete line of address but I could not see how this can be done.
Also, can someone explain why if I remove the commented line the variable is not stripped of any letters albeit just 1?
$(document).ready(function() {
$("#testMe").on('propertychange change click keyup input paste', function() //attaching multiple handlers
{
var removedText = $("#testMe").val().replace(/\D/, '');
$("#testMe").val(removedText); //only removes once if removed
console.log(removedText);
}
);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="hidden" id="hide" value="">
<input type="text" id="testMe" value="">
<span id="test2"></span>

The question was kind of unclear to me, but I did my best to answer.
https://jsfiddle.net/ccu6j6xu/
<input type="hidden" id="hide" value="">
<input type="text" id="zip" value="">
<input type="text" id="address" value="">
<span id="test2"></span>
In the HTML, all I did was add another input, because I think that's what you wanted to do?
$(document).ready(function() {
$("#zip, #address").on('propertychange change click keyup input paste', function() {
var concatText = $("#zip").val().replace(/\D/g, '') + "|" + $("#address").val().replace(/\D/g, '');
$("#test2").text(concatText);
$("#hide").val(concatText);
});
});
Then in the JavaScript, I changed the selector to match the new inputs, and then I changed the function.
The first line of this function defines a variable concatText to hold the values of each input concatenated with a | character between. Each one has regex applied to remove the letters for the final value. Then the next line changes the value of the span to display, and the final line applies this value to the hidden input.
Again, the question was kind of confusing to me, but feel free to comment and I can help some more :)
EDIT: reread the question, I think this better answers