Develop Reference

Is there a way to check if a user has interacted with a range input [duplicate]

We are developing a Web-App, which launches on Desktop and on tablets (iPad, Android or a surface). Now we are building our own keyboard for number inputs. When you set the focus on an input field with a mousclick, the costum keyboard opens correct. But when you set the focus to the input with a touched click (tablet), the default keyboard opens also. Our idea is, to detect, if there was a mouse-click or a touched click. If it's a touched click, we can set the readonly="true" property to the input, so the default keyboard on a tabled wouldn't slide in.
Is there a way to detect or check which "type" of click it was (touched or mouse).

You can define an event for the both actions touchend and click then detect which one is triggered using type of the event :
$('#element-id').on('click touchend',function(e){
if(e.type=='click')
console.log('Mouse Click');
else
console.log('Touch');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="element-id">Click here</button>
Hope this helps.

#Zakaria Acharki
<script type="text/javascript">
$(document).ready(function(){
$(".cCostumeKeyboard").on("click touchstart",function(e){
if(e.type=="click") {
alert("Mouse");
alert(e.type);
}
else if(e.type=="touchend"){
alert("Touch");
alert(e.type);
e.preventDefault();
e.stopPropagation();
}
});
});
</script>
Try this snippet on a touch device. It shows after the first touch on an input follow:
Alert: "Touches"
Alert: "touchend"
Alert: "Mouse"
Alert: "click"

Preventing Enter from Submitting form in Safari

I have the following code on my page:
$('form.enter-doesnt-submit').submit(function () {
console.log($(document.activeElement));
if($(document.activeElement).attr('type') == 'submit') {
console.log
return true;
} else {
console.log("Prevented enter from submitting the form.");
return false;
}
});
Which I'm fairly certain I got from stackoverflow a long time ago. It works fine, just not in Safari. The reason being that when I log out document.activeElement it gives me the entire page, so of course the attribute type is not submit and therefore the form doesnt submit even when you are clicking the submit button.
I need to be able to prevent enter submitting on my form because they are online tests, and if the user is writing an answer and accidentally presses enter before the form is complete then they are marked incorrectly as they didn't actually finish the test.
Can anyone help me with some way of preventing enter from being pressed on Safari?

Okay I solved this by coming at it in another way, by targeting the inputs in the form instead:
$('form.enter-doesnt-submit input[type=text]').keypress(function (e) {
if(e.keyCode == 13) {
e.preventDefault()
}
});
Pressing enter in a textarea doesnt submit a form by default, so its just the inputs that need preventing. Now my submit button works in safari and in chrome.

How to detect ENTER keypress/ or the "GO" button in the Address Bar?

I want to detect the ENTER keypress of the Address Bar and also, the "Go(to the specified URL)" button using Javascript.
As per my previous efforts using "keycode==13" did not work as required.
say, in the following code:
window.onkeypress = testKeyEvent;
function testKeyEvent(e) {
if (e.keyCode == 13) //We are using Enter key press event for test purpose.
{
alert('Enter key pressed');
}
else //If any other button pressed.
{
alert('Not Enter key pressed');
}
} </script>
I want first the Alert box to be displayed,after I have typed any URL(valid or not) in the address box and Pressed ENTER/ Clicked GO button and then go to specified URL.
Is it Possible? I know I am missing out on a lot of things, Please mention about them.

If I am interpreting your question correctly, I don't think you can do this, because the context in which the JavaScript runs stops at the Document (meaning, JavaScript doesn't even quite know that the browser itself exists).

You can't detect the keystroke because it's outside your window, but you can detect navigation away from your page like
window.onbeforeunload = function () {
alert("Leaving page...");
}

Auto Show Soft Keyboard on mobile web browser

I want to make the soft keyboard show on
$( document ).ready(function() {
....
});
here's my html code:
<form id="typerForm">
<input id="typer" style="position:relative; left:-100em;"/>
</form>
<div id="myInput" style="border:2px solid #4AA; width:6em; height:1em; font-size:2em"></div>
<div style="height:20em; background-color:#eee">
</div>
and here's my javascript code:
$('body').click(function() {
$('#typer').focus();
$('#typer').select();
});
$('#typerForm').submit(function() {
//alert("submit");
setTimeout("$('#typer').focus();", 1000);
return false;
});
$('#typer').bind('keyup', function(e) {
var input = $.trim($(this).val());
// some lines of code..
$('#myInput').text(input);
//...
//$(this).val('').focus(); // clean up
});
or you can look at my code here http://jsfiddle.net/7urry794/
my code works to show the keyboard on mobile web browser when i click on somewhere or click on the input text. And what i want is show keyboard automatically when the page ready or finish loading

you can use below code to open keyboard on iOS or Android
There are a couple of ways I know of to get around this:
prompt() opens the keyboard
If you trigger the .focus() from within a .click() event (e.g. from opening your dialog), the keyboard shows up
Hope it might help

You can do this by calling focus() then click() on the input, but only if the script is initiated by user input. All attempts to get this to work from an onload handler with no user interaction FAILED :-( Beware of endless loops if your script is triggered by an onclick() on a containing element. The script below is working for me on Chrome for android 58 and Safari mobile 602.1, when called from an onclick().
function onSomethingOtherThanLoad(event){
// get the input
var target = document.getElementsByTagName("input")[0];
if (event.target != target) {
target.focus();
target.click();
}
}

Call key press with javascript

I am trying to press tab and enter key through javascript/jquery on page load.
like:
if(event.keyCode == 13){
$("#submit").click();
}
this would only work when user presses the enter key but I want the javascript to do this stuff for the user on page load.

You can simulate a keypress with this code:
function simulateKeyPress(character) {
jQuery.event.trigger({ type : 'keypress', which : character.charCodeAt(0) });
}
thanks to this thread: Is it possible to simulate key press events programmatically?
but as Ghyath Serhal pointed out, there might be a better way than to simulate a keypress to then catch it by your same code.

Check the below if it helps
<body onload="$('#submit').click();"></body>