I have a input on my page where I am asking the user to type in any value and based on his entry the values are displayed from the database.
For example if the user types p in the input box he is displayed programmer 1 and programmer 2 just as it does in google.com. This I am doing through ajax.
My problem is after programmer 1 and programmer 2 is displayed, the ↓ Down Arrow key doesn't bring the control to the programmer 1 but rather keeps the control on the search box and the user has to click on any of these options. I want the user to be able to use the ↓ down arrow key to come down to his search suggestions.
I have tried to implement Focus functions but it doesn't seem to work and I don't really know how to look for this information?
Code:
<input type="text" name="searchbox" class="search_input" id="searchboxid" autocomplete="off" autofocus="on" onkeyup="suggest(this.value)" placeholder="Please search here..."/>
Any help will be much appreciated.
Just a suggestion.
Instead of fighting with your own code or going for keybinding stuffs. Its better to use jquery autocomplete.You can easily port your code to fit with Jquery auto complete.Its giving the option what you are expecting.
Refer the URL below.
http://jqueryui.com/autocomplete/
Try with autosuggest or with autocomplete on. If none works , try key binding via hex code for down arrow. It is little dark , but it works in many cases , only prob could be AV's , which could recognise it as a keylogger.
Oke short tell: i'll put in code later (15 minuts)
Html:
<input type=""text id="r0">
<div id="r1">the damn results</div>
<div id="r2">another dman result</div>
Jquery:
$("body").keydown(function (e) {
if (e.keyCode == 38) { //up-arrow
//check wich one is focus
//?????
//r
if ($("#" + rId).length > 0) {
//focus on this element
}
}
if (e.keyCode == 40) { //down-arrow
//check wich one is focus
//?????
//r
if ($("#" + rId).length > 0) {
//focus on this element
}
}
});
Raw i will work it out in a second
Related
help me out on this one if it's possible.
I have a product page and, on this page, people will be able to select a color to remove from the package and select how many items from determined kind they'll buy.
Example: I'm selling blouses and i have'em in 6 colors, red, blue, purple, yellow, orange and green, the customer would be able to choose one between those 6 or none of them and, they must fill some boxes with some infos, like, how many small blouses, or how many large blouses, etc.
But my website will be mainly accessed by old fellas, so, i can't just do my thing and hope for the best like some would, i need to make this site really easy and almost out of the box to use it.
Heres a printscreen of my web page
-> printscreen: http://prntscr.com/ptdyu2
Anyway, i need to uncheck everybox that has a 0 or smaller number in front of it.
Is there a way for doing this?
function(checkbox_validator){
var checkbox0 = document.getElementsByName(tmcp_checkbox_0_0_quantity)
if (checkbox0 != True){
//This is how much i've progressed on this part, only came until this point
}
}
Sure it is possible. I created you a little example. Basically you will add a event listener for change on the input text fields. If the user types a number, or the value will change somehow, the event listener is getting triggered.
Based on the value you will set the specific checkbox checked or unchecked.
var input = document.getElementById('inputItem1');
var checkbox = document.getElementById('checkItem1');
input.addEventListener("input", update);
function update()
{
//Now update the selector
if (input.value > 0 )
{
checkbox.checked = true;
}
else
{
checkbox.checked = false;
}
}
<form>
<input name="input" value="0" id="inputItem1">
<input type="radio" id="checkItem1" name="checkItem1" value="">
</form>
Previously I have done a useful function for user to auto populate dashes after a length of string.
To understand my scenario :
I have a text box for user to key in Mobile No.
To make the value inserted is the same format, I code a script to auto insert a dash a length of char.
The problem is, whenever I want to erase the inserted value, the script wont allow me as it auto populate the dash after a length of
string unless I press the "backspace" longer then only I can erase
the inserted value.
Here is my script for the auto inserted dash :
$(document).ready(function() {
$("input[name$='Mobile No. Text Box']").keyup(function(){
if ($(this).val().length == 5){
$(this).val($(this).val() + "-"); }
}); });
and here is the image of the text box
Mobile No. Text Box
Please help, Thank You.
Regards
Try adding a Validation to avoid adding the "-" when user presses the backspace
$(document).ready(function() {
$("input[name$='Mobile No. Text Box']").keyup(function(e){
if ($(this).val().length == 5 && e.which != 8){
$(this).val($(this).val() + "-"); }
}); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="Mobile No. Text Box">
There are plenty libraries out there which can help you with this problem. I personally recommend this one https://github.com/text-mask
You can read through plain vanilla JavaScript usage right here https://github.com/text-mask/text-mask/tree/master/vanilla#readme
I believe its first example is a basic phone-number input which is exactly what you are looking for.
I am using selectDialog and Tableselectdialog for value help in my input fields.
However, after searching, if I click the (X) button next to the search field, my search field doesn't get cleared.
Can anybody give any insight on how to achieve that? Since I don't see any events bounded to that field.
You can process it in the event search:
search : function(oControlEvent){
//Indicates if the user pressed the clear icon.
if(oControlEvent.getParameters().clearButtonPressed) HERE WRITE YOUR CODE;
}
This is how it worked for me (I only explicitly called the getParameters function)
<input type="text" id="myInput" >
<span class="close" onclick="clearText()">X</span>
function clearText(){
document.getElementById('myInput').value= ""
}
Just try this. Hope it works.
Does anyone know if it's possible to add a plus sign in a html input type=number field? I have a scenario whereby users need to enter a modifier value which is either +1 to +10 or -1 to -10. I want to make it very explicit to the user that their inputted value increments the resulting value. therefore it would be great if a + sign is prepended to a positive inputted value.
I'm using this input in an Angular2 reactive form with bootstrap styling. so an Angular2 directive, a boostrap style or even a jquery solution are welcome
What I've seen so far is about adding currency symbols inside the form control or about adding + and minus buttons to increment and decrement the value. But that's not what I want, so I doubt if this is possible at all.
I don't think it is possible to manipulate the input.
The default behavior is "-" for negative and no sign for positive numbers.
Even if you checked some custom UI frameworks like:
JQuery UI, Bootstrap, Angular Material ... you will not get the wished behavior.
I guess the only solution for this is to write your own custom code.
Two scenarios are possible:
1- An input with Text and the manipulating will be done in Javascript.
2- Create a pipe in angular2 and give it to the element which I think is much easier than the first one.
No it's not possible. The number field only accepts -, 0-9 and e to be entered. As a workaround you could place the + in the HTML before the input, eg:
+ <input type="number" />
Alternatively you could use a standard type="text" input, but that would mean creating your own validation logic which would make the code much more complex.
I hope this will help on you guys!!
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).on('keypress','#input',function (e) {
var keyCode = e.which;
if ($(this).val().trim().charAt(0) == "\u002B") {
if ( keyCode == 43 ) {
return false;
}
}
else{
for (var i = 1; i < $(this).val().length+1; i++) {
if(i!=0){
if ( keyCode == 43 ) {
return false;
}
}
}
}
});
$(document).on('input', '#input', function() {
this.value = this.value.replace(/[^+{1}|^0-9]/g,'');
});
</script>
I have an input field called email class keyup-an. I validate it easy with this, but it works or when an individual inputs the field manually. How do i make it work also for selecting historical data. when you click email and yesterday you put test#test.com, the history list drops down and you can select it, but its not a keyup.
I TRIED the same function after but with .change or .click and it didnt work. Can you guys please suggest?VALID
$('.keyup-an').keyup(function() {
$('span.error-keyup-1').hide();
var inputVal = $(this).val();
var numericReg = /^[a-zA-Z0-9_ ]{2,30}$/;
if(!numericReg.test(inputVal)) {
$(this).css('background', '#FAC3C3');
$(this).after('<span class="error error-keyup-1">Validationfail</span>');
}
else {
$(this).css('background', 'lightgreen');
}
});
you can do this by
autocomplete='off'
example
<form name="form1" id="form1" method="post" autocomplete="off">
or try something like
$(input).autocomplete().keyup(function(event) {
event.stopPropagation();
}).keydown(function() {
$(this).autocomplete('search', $(input).val());
});
good read
How to Turn Off Form Autocompletion
If I understand you correctly, you want an event which gets triggered if you click on the autocomplete item.
This is a known bug, check out this article about a jquery plugin, I think this is exactly what you need:
http://furrybrains.com/2009/01/02/capturing-autofill-as-a-change-event/
Instead of binding your function to the keyup event.. maybe bind it to change event?
ok.. this doesn't work on some browsers it seems.. you can refer to the previous answer and use the solution, which basically creates a timer to check the values in intervals to detect changes. Forcing the browser to do a lot of work if you want the validation to happen very fast imo.. Or you could turn of autocomplete and force the user to enter the values manually like the first answer suggested.