I am using asp:button to create a keyboard with A-Z and 0-9 for touch screen using Java script. This keyboard is linked with one textbox. If we click one button corresponding text will be displayed on the textbox. Its working fine. I have included the autocomplete feature to this textbox using jquery JQuery Autocomplete.
Problem:
The autocomplete is not working if i my user define keyboard. How to modify my key buttons as keyboard keys[Set event keycode]? Is it possible? Is there any other way to achieve this?
Code:
<asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
<asp:Button ID="zero" runat="server" Text="0" CssClass="myclass" OnClientClick="return typeLetter(this);" TabIndex="20"/>
function typeLetter(currentbutton) {
if (previousActiveElement != null) {
if (previousActiveElement == 'antSearchText'){
var position = document.getElementById('position').value;
if (position == '') {
alert('chk position');
} else {
var existingString = document.getElementById(previousActiveElement).value;
var beforeString = existingString.substring(0, position);
var afterString = existingString.substring(position, existingString.length);
document.getElementById(previousActiveElement).value = beforeString + currentbutton.value + afterString;
setCaretPosition(document.getElementById(previousActiveElement), parseInt(position) + 1);
setCaretPosition(document.getElementById(previousActiveElement), parseInt(position) + 1);
}
}
}
return false;
}
Edit:
In autocomplete plugin the following is getting the key event, How to pass same key event by using my keys?
$input.bind(($.browser.opera ? "keypress" : "keydown") + ".autocomplete", function(event) {
}
Try triggering the jQuery keydown/keyup event manually. I cannot recall for the life of me which one autocomplete triggers on, but here's the gist:
// your documment.getElementById(...)
jQuery('#'+previousActiveElement).keyup();
// your setCaretPosition
Try the different key events and one should cause the autocomplete to kick in.
Hope that helps!
Thanks,
Joe
Problem get solved by using the following code.
Code:
var q = document.getElementById('txtbox');
var evObj = document.createEventObject();
evObj.keyCode = 84; // [T] key
q.fireEvent('onkeydown', evObj);
Geetha.
Related
I have the following Textbox
<asp:TextBox runat="server" ID="txtSeleID" Columns="12" MaxLength="14"
onfocus="javascript:SetSearchText();"
onchange="javascript:SetSearchText();"></asp:TextBox>
<asp:RegularExpressionValidator id="REV_SeleID" runat="server"
ErrorMessage="ID must contain up to 12 numbers."
Display="Dynamic" ControlToValidate="txtSeleID"
ValidationExpression="ID...|^\s*(\d{1,12}|\d{4}-\d{4}|\d{3}-\d{4}|\d{2}-\d{4}|\d{1}-\d{4}|\d{1}-\d{4}-\d{4}|\d{2}-\d{4}-\d{4}|\d{3}-\d{4}-\d{4}|\d{4}-\d{4}-\d{4})\s*$" CssClass="ValidationError" SetFocusOnError="True">(!)
</asp:RegularExpressionValidator>
and the below javascript :
function SetSearchText() {
var Tbox = document.getElementById("<%=txtSeleID.ClientID%>");
if (Tbox.value == "ID...") {
Tbox.value = "";
Tbox.className = "";
}
}
$(document).ready(function () {
var Tbox = document.getElementById("<%=txtSeleID.ClientID%>");
if (Tbox.value.length == 0) {
Tbox.className = "quickEnter";
Tbox.value = "ID...";
}
if (Tbox.value == "ID...")
Tbox.className = "quickEnter";
});
Here is the button:
<asp:ImageButton EnableViewState="false" id="SubmitBtn" runat="server"
ImageUrl='<%#Page.ResolveUrl("~/images/btn_submit.gif")%>'
onclick="Submit_Click" ToolTip="Submit" />
The issue is that when I click on my submit button, it calls the SetSearchText() function and sets the value to "". In IE 10, it sets the focus to this textbox and I have to hit my submit button again to get it to submit.
If I comment out the setting of the value, the focus issue doesn't occur.
How can I prevent the browser from forcing a focus to my textbox when attempting to submit?
EDIT: Added the regular expression validator to the code section.
EDIT: I found this issue that was having a similar issue, but I don't see a resolution. In this one, he is using html tags. I'm using ASP tags so I can't as easily change the input type.
I ended up doing a workaround by checking for the browser version. If IE 10/11, I don't add the text to the input field.
$(document).ready(function () {
var lexidTbox = document.getElementById("<%=txtSeleID.ClientID%>");
//workaround for IE10/11 issue
var showLegalText = true;
// IF THE BROWSER IS IE10
if (navigator.appVersion.indexOf("MSIE 10") !== -1) {
showLegalText = false;
}
// IF THE BROWSER IS IE11
if (navigator.userAgent.indexOf("Trident") !== -1 && navigator.userAgent.indexOf("rv:11") !== -1)
{
showLegalText = false;
}
if (showLegalText) {
if (lexidTbox.value.length == 0) {
lexidTbox.className = "quickEnter";
lexidTbox.value = "ID...";
}
if (lexidTbox.value == "ID...")
lexidTbox.className = "quickEnter";
}
});
To be sure, I do not care for this workaround because it's dependent on checking IE versions, but this is the only way I could find to solve this issue. This prevents the line Tbox.value = ""; from being run, which avoids the issue I'm having.
I assign the desired tags with class='ShowSave', make sure the SaveButton container is not displayed at start up, then display the SaveButton container when a keyup event occurs (data entry).
Everything works fine except the tab key also triggers a keyup event causing the SaveButton container to show when no data has changed. I tried just using $(".ShowSave").change(), but the SaveButton container only displayed after I left the field. That's not desirable.
jQuery:
$(".SaveButton").css({'display':'none'});
$("input.ShowSave").keyup*( function(){ $(".SaveButton").css({'display':'block'}); } );
HTML:
<form>
<td><input class='ShowSave' name="foo" type="text" value='foo' tabindex='1'></td><
<td class='SaveButton' ><img class='SaveImage' onClick='jsPostMe()' /></td>
</form>
Thanks ahead of time for any advice. I'm using straight jQuery with no plug-ins.
You want to test for the keycode if your keyup event. Something like this:
$("input.ShowSave").keyup(function(e){
var code = e.which;
//keycode 9 = tab
if(code == 9) {
return;
}
//do something
});
Here is a working example
This of course will mean that other keys may also be pressed that are not valid. You could also include a check for those key codes (here is a list), but it would be better if you instead tracking the original value of the textbox and then checked for a change on keyup.
Something like this (note: it makes use of data attributes):
<input data-original="old" value="old" class="ShowSave" />
$("input.ShowSave").keyup(function(e){
var original = $(this).data("original");
var newValue = $(this).val();
//check if value has changed
if(original == newValue){
$(".SaveButton").hide();
}
else{
$(".SaveButton").show();
}
});
Here is an example for this
something like this
$("input.ShowSave").keyup(function(e){
if(e.which != 9){
$(".SaveButton").css({'display':'block'});
}
});
I want to add a autocomplete function to a site and found this guide which uses some js code which works really nice for one textbox: http://www.sks.com.np/article/9/ajax-autocomplete-using-php-mysql.html
However when trying to add multiple autocompletes only the last tetbox will work since it is the last one set.
Here is the function that sets the variables for the js script
function setAutoComplete(field_id, results_id, get_url)
{
// initialize vars
acSearchId = "#" + field_id;
acResultsId = "#" + results_id;
acURL = get_url;
// create the results div
$("#auto").append('<div id="' + results_id + '"></div>');
// register mostly used vars
acSearchField = $(acSearchId);
acResultsDiv = $(acResultsId);
// reposition div
repositionResultsDiv();
// on blur listener
acSearchField.blur(function(){ setTimeout("clearAutoComplete()", 200) });
// on key up listener
acSearchField.keyup(function (e) {
// get keyCode (window.event is for IE)
var keyCode = e.keyCode || window.event.keyCode;
var lastVal = acSearchField.val();
// check an treat up and down arrows
if(updownArrow(keyCode)){
return;
}
// check for an ENTER or ESC
if(keyCode == 13 || keyCode == 27){
clearAutoComplete();
return;
}
// if is text, call with delay
setTimeout(function () {autoComplete(lastVal)}, acDelay);
});
}
For one textbox I can call the function like this
$(function(){
setAutoComplete("field", "fieldSuggest", "/functions/autocomplete.php?part=");
});
However when using multiple textboxes I am unsure how I should go about doing this, here is something I did try but it did not work
$('#f1').focus(function (e) {
setAutoComplete("f1", "fSuggest1", "/functions/autocomplete.php?q1=");
}
$('#f2').focus(function (e) {
setAutoComplete("f2", "fSuggest2", "/functions/autocomplete.php?q2=");
}
Thanks for your help.
You should be using classes to make your function work in more than one element on the same page. Just drop the fixed ID's and do a forEach to target every single element with that class.
I'm using jquery tagsInput plugin where I need to dynamically modify the query(deleting the query or entering the new query) without actually typing in the search box connected with tagsInput plugin.
My problem here is I want to trigger backspace event at first then enter event next. Here is the code.
function triggering_events() {
$(".tag").each(function() {
var e = jQuery.Event("keydown");
e.keyCode = 8;
e.which = 8;
$("#input-search_tag").trigger(e); //triggering backspace event
});
var input = $("#input-search_tag");
input.val("food");
input.trigger(e); //triggering enter event
}
But only the backspace event is triggering from the above code. How can I make that enter event work?
Could anyone point out the mistake I've done?
Thanks!
you can try use the methods removeTag and addTag for remove and add tag's:
function triggering_events() {
var
idInput = 'input-search',
input = $("#" + idInput);
$("#"+idInput+"_tagsinput .tag").each(function() {
var tag = $.trim($(this).find('span:eq(0)').text());
input.removeTag(tag);
});
input.addTag("food");
}
run
There is an issue here:
$("#input-search_tag").val("food").trigger(e); //triggering enter event
.val() returns you a string value of the jquery Element, it is not a chainable method. strings do not have a trigger method.
You could fix this by splitting it into two calls:
var input = $("#input-search_tag");
input.val("food");
input.trigger(e); // triggering enter event
Or using .end():
$("#input-search_tag").val("food").end().trigger(e); //triggering enter event
Edit: putting it all together, along with reusing one event instead of creating multiples:
function triggering_events() {
var e = jQuery.Event("keydown");
e.which = 8;
$(".tag").each(function() {
$("#input-search_tag").trigger(e); // triggering backspace event
});
e.which = 13;
$("#input-search_tag").val("food").end().trigger(e); // triggering enter event
}
I have a asp.net input box:
<asp:TextBox ID="InCL" runat="server" Text=""></asp:TextBox>
As soon as a number is entered I would like to send that value to a javascript function that updates a google gauge.
For example, user inputs 77, the google gauge immediately dynamically moves to that position.
Any help is appreciated.
Thank You.
EDIT
I'm looking at the onkeyup DOM event, is this a good way to go?
I think I'm just talking to myself on here.....
Here is a script in jQuery I used to do something very similar. It does indeed use onkeyup to set the value; it also uses onkeydown to prevent non-numeric values; and forces a default value of 0 if the user tries to leave the textbox with no value:
var updateUI = function(value) {
//set gauge
};
var textbox = $('#id_of_textbox)'
textbox.keydown(function(e) {
return validNumberKeys.indexOf(e.which) > -1;
}).keyup(function(e) {
var input = $(e.target);
if(input.val() !== '') {
updateUI(input.val());
}
}).blur(function(e) {
var input = $(e.target);
if(input.val()==='') { input.val('0'); }
updateUI(input.val());
});
var validNumberKeys = [8,9,13,16,17,18,35,36,37,38,39,40,45,46,48,49,50,51,52,53,54,55,56,57,96,97,98,99,100,101,102,103,104,105];
You can do this:
<asp:TextBox ID="InCL" runat="server" onchange="YourJavaScriptFunction()" Text=""></asp:TextBox>
YourJavaScriptFunction() would then read the value out of InCL and do whatever you need to do with it.
You could also pass the value to your JavaScript like this: onchange="YourJavaScriptFunction(this.value)"
The same syntax will work with onkeyup: onkeyup="YourJavaScriptFunction()"