In my project: CSSHTML Keyboard I have setup a keyboard based off my old laptop keyboard, it was a small project I made as a homework piece for school. The issue is, Im not sure how to add the Specific Chars to the keyboard, like, for example: Say I click Shift and then A/a, I want it to place "A" in the input. If someone could bring me a little information for this, I would appreciate it. Also for the later notice, Im not trying to make Every key work like it should, only base keys (Letters, Numbers, Capitalization, Set Symbols, Caps Lock, Shift, Space, and Backspace)
I made a Calculator: Simple Calculator
and I tried using a similar method of sending a symbol/character to the Input, but it didn't seem to work well.
the method I tried was by using an input:
<input id="butn" class="output" type="textfield" name="ans" value="!The
Text input is Currently Not Available!"></input>
and then using a small bit of Javascript to send math equations from buttons to the form and then to the input, then solving them with an evaluation Javascript snippet
Here is the link to the current code: CSSHTML Keyboard Finished
By the way, apologies if the keyboard is put together "duck tape and glue" style, I'm still decently new to perfecting CSS Sizing and aligning, so for now I write everything manually with margins and sizing.
After a while of testing the calculator method above that I used, I had managed to sorta get it to work at one point, but it placed undefined, so in a way I kind of gave up on the project temporarily, Either way, I'm happy with my finished Product, even if I cant use it to type out the characters.
You can add this simple JS to get the keydown event, get the value of the pressed key and print it in the input.
Then you should configure keys that you don't want to be written when you type them ( especial actions for example)
I've put the backspace and some example keys for you.
var output = document.querySelector('.output');
addEventListener('keydown', function(e) {
e.preventDefault();
// Backspace
if ( e.key === 'Backspace' ){
output.value = output.value.substr( 0, ( output.value.length -1 ) );
// The values you dont want to write literally
} else if( e.key === 'Shift' ||
e.key === 'Control' ||
e.key === 'Alt' ||
e.key === 'AltGraph' ) {
output.value += '';
} else {
// The keydown values
output.value += e.key;
}
});
additions
For the question about how to send value with a button:
First you must set "something" for select them with js (for example a class),
and you should set a value attribute tu get it later.
<button type="button" class="letter keys" value="1" >!<br>1</button>
Then select all buttons with a loop and add an event when click them.
At last just take the attributes.value of the element and do what you want with it.
here is an example:
var buttons = document.querySelectorAll('.letter');
for( let button of buttons ){
button.addEventListener('click',function(e){
console.log(button.attributes.value);
})
}
That will work for you but i recomend you to read something more about basics of JS to manage all you want to do before this, because this is only the beginning.
Hope it helps you.
Related
Does the beforeinput event provide a convenient way to preview the result of a proposed modification so that it can be blocked if necessary for validation purposes?
I'm not looking for alternative ways to do input validation; I'm already well-aware of methods involving the keypress and input events, as well as HTML5 validation, etc.. Right now, I'm specifically looking into the beforeinput event to see what it offers.
So far, this is the best I've come up with:
document.getElementById("phone").addEventListener("beforeinput", function(e) {
if(!/^(\d{0,7}|\d{3}-\d{0,4}|)$/.test(e.target.value + (e.data ?? ""))) {
e.preventDefault();
}
return;
});
<input id="phone">
The text field in the above snippet should accept a simple 7-digit phone number with optional dash after the 3rd digit.
Notice that I'm appending the event's data property to the input's current value to create a preview of the modified value. This works fine if you only enter input sequentially. But if, for example, you type in all 7 digits and then arrow back to just after the 3rd and try to insert the dash, you can't do it, because the validation assumes you're at the end where a dash would be invalid. Other problems arise if you try to replace or delete a selection.
An accurate preview will be required to solve these problems. Is there a simple way to get one from the beforeinput event?
You'd have to get the selectionStart and selectionEnd to figure out how many characters were removed / replaced / etc, but yeah, pretty simple:
document.getElementById("phone").addEventListener("beforeinput", function(e) {
const nextVal =
e.target.value.substring(0, e.target.selectionStart) +
(e.data ?? '') +
e.target.value.substring(e.target.selectionEnd)
;
console.log(nextVal)
if(!/^(\d{0,7}|\d{3}-?\d{0,4}|)$/.test(nextVal)) {
e.preventDefault();
}
return;
});
<input id="phone">
I try to do simple code for guessing notes by ear. I have tabs with several empty input fields and you need to put right numbers in these fields according to certain melody (for guitar fretboard) . One button shows first note, another button checks whether you put right or wrong number and depend on it approves or erase your number.
I know how to check every input field using its id's but can i do it such way that when i push 2nd button it get value from selected input and compare it to its placeholder or value attribute?
It is my codepen
https://codepen.io/fukenist/pen/BxJRwW
Script part
function showfirst() {
document.getElementById("fst").value = "12"
}
function show1other() {
var snote = document.getElementById("scnd").value;
if (snote == 9 ){
document.getElementById("scnd").value = "9";
}
else {
document.getElementById("scnd").value = "";
}
}
You can use document.querySelectorAll() to get all your inputs and loop over them.
Sample:
// Get all inputs as an array (actually NodeList, to be precise; but it behaves similar to an array for this use case)
var inputs = document.querySelectorAll('input');
// Function to reveal the first input's value
function showFirst(){
inputs[0].value = inputs[0].dataset.v;
}
// Function to check all values and clear input if wrong
function checkAll(){
inputs.forEach(function(input){
if(input.dataset.v !== input.value){
// Wrong answer, clear input
input.value = '';
}
});
}
<input data-v="12" size="2" value=""/>
<input data-v="9" size="2" value=""/>
<input data-v="8" size="2" value=""/>
<br/>
<button onclick="showFirst()">Show First</button>
<button onclick="checkAll()">Check All</button>
Notes:
I have used data-v to store the correct answer instead of placeholder as that attribute has a semantically different meaning
It may be out of turn but my two cents: Writing out entire songs like this by hand may become tedious. Consider using a JSON string or something similar to map out the tabs and use a templating framework to align them.. Some things you may need to look out for while designing something like this : Alignment of notes (successive notes, simultaneous notes), timing of the song, special moves like slide, hammer on etc.
It may be a better idea to make the Guitar Strings be a background element (either as a background-image or as absolutely positioned overlapping divs) (so You don't have to worry about the lines going out of alignment)
Reference:
HTMLElement.dataset
document.querySelectorAll
I have a <input id="inp" type="text"> that user writes in, and sometimes uses suggests from a dictionary. When a suggest is selected I do:
var input = $('#inp');
input.val(input.val()+suggestedText+' ');
input.focus(); // that is because the suggest can be selected with mouse
everything works great, but when after adding a suggest that makes the resulting input.val() too long to fit in the edit field, the cursor is at the end of the string (which is good), but only the beginning of the string is visible in the edit field, so the cursor is hidden as well.
As soon as a key is pressed (a key that changes the value) the "scroll" goes to the end of the string hiding the beginning... How to trigger this behavior automatically, without having to press a key?
I have found a solution here - but it is not good as the whole input experience is changed...
Have you tried:
var input = $('#inp');
input.val(input.val()+suggestedText+' ');
input.focus(); // that is because the suggest can be selected with mouse
var height=input.contents()[0].outerHeight()
input.animate({
scrollTop:height
},'normal');
?
thank you all for answers, meanwhile I have found sth as well...
when using mouse to click the input lost focus (clik on sth else), and then regained it (thanks to input.focus()) - "scrolling" to the end, but when choosing a suggest was done with a keyboard, focus was never lost, and that is why it was not "scrolling" itself. I just simply added input.blur(), before input.focus(), now works like a charm... have a look at working example
http://46.4.128.78/input/
To make this work you need to set the focus() BEFORE you set the value. You can fix this in many ways, for example:
input.focus(); // that is because the suggest can be selected with mouse
var input = $('#inp');
input.val(input.val() + suggestedText + ' ');
Or this one:
function changeValue(element, newValue) {
element.focus();
element.val(element.val() + newValue + ' ');
}
Im just wondering how I go about catching the event when the user is typing into a text input field on my web application.
Scenario is, I have a contacts listing grid. At the top of the form the user can type the name of the contact they are trying to find. Once there is more than 1 character in the text input I want to start searching for contacts in the system which contain those characters entered by the user. As they keep typing the data changes.
All it is really is a simple type ahead type functionality (or autocomplete) but I want to fire off data in a different control.
I can get the text out of the input once the input has lost focus fine, but this doesnt fit the situation.
Any ideas?
Thanks
Use the keyup event to capture the value as the user types, and do whatever it is you do to search for that value :
$('input').on('keyup', function() {
if (this.value.length > 1) {
// do search for this.value here
}
});
Another option would be the input event, that catches any input, from keys, pasting etc.
Why not use the HTML oninput event?
<input type="text" oninput="searchContacts()">
I would use the 'input' and 'propertychange' events. They fire on cut and paste via the mouse as well.
Also, consider debouncing your event handler so that fast typists are not penalized by many DOM refreshes.
see my try:
you should put .combo after every .input classes.
.input is a textbox and .combo is a div
$(".input").keyup(function(){
var val = this.value;
if (val.length > 1) {
//you search method...
}
if (data) $(this).next(".combo").html(data).fadeIn(); else $(this).next(".combo").hide().html("");
});
$(".input").blur(function(){
$(this).next(".combo").hide();
});
What I am trying to achieve is to force a textbox to start with a prefix ( country telephone code ) and to make this permanent, meaning that the user cannot bypass this. For example, the Phone textbox should always start with "+45" and after that the user can add the phone number. How to prevent it from deleting the code, by any means?
What I done so far, using jQuery:
//attach event on phone text boxes
$(document).delegate(".phone", "keyup", function(event){
var target = $(this);
var value = target.val().trim();
if (value.indexOf(CONSTANTS.DANISH_PHONE_CODE) == -1) {
//country code not found
//if the user starts deleting the country code
if (value.indexOf("+") == 0){
value = "";
}
//if the user types something in front of the country code, put the country code at the end
value = value.replace(CONSTANTS.DANISH_PHONE_CODE, "");
//phone doesn't start with +45
value = CONSTANTS.DANISH_PHONE_CODE + value;
target.val(value);
}
});
But the problem is that the user can delete the plus sign and the prefix is put automatically at the start so we will have +4545. Do you know an elegant way of achieving this? Thanks.
You can absolutely position the text (in a span) over the textbox and add a left-margin to it.
This way users won't be able to remove it. But you'll have to add it server side.
Add the +45 as static html before the field. Required the user to enter "the rest" of the number (not the +45).
If necessary, add the +45 server side before persisting the value. Similarly, remove the +45 when editing.
JSFiddle Example
This should actively keep them from deleting "+45" instead of trying to fix the problem after the user as changed it. Upon keypress, determine character position, if the position is too early in the string (i.e. inside the "+45" as oppose to after it) then don't allow the keypress, unless that key is the left or right arrow keys.
Acquired resources:
http://blog.vishalon.net/index.php/javascript-getting-and-setting-caret-position-in-textarea
Binding arrow keys in JS/jQuery