replacing Enter key code with TAB key code in jQuery - javascript

I have a script in javascript that replace Enter with TAB key:
function ReplaceEnterWithTab() { if (event.keyCode == 13) event.keyCode = 9; return false; }
and I use it this way:
txt.Attributes.Add("OnKeyDown", "ReplaceEnterWithTab();");
this code work nice.Now I want to develop a script with jQuery that will not need to add OnKeyDown attribute.please consider this sample page:
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server" CssClass="EntTab"></asp:TextBox>
<br />
<br />
<asp:TextBox ID="TextBox2" runat="server" CssClass="EntTab"></asp:TextBox>
<br />
<br />
<asp:DropDownList ID="DropDownList1" runat="server" CssClass="EntTab">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
</asp:DropDownList>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
</div>
</form>
I write this code :
$(document).ready(function () {
$('.EntTab').on('keydown', function (e) {
if (e.keyCode == 13) e.keyCode = 9;
});
});
the problem is when I press Enter key on TextBox1, Button1 cause page post back. How I can solve this issue?
thanks

Try:
$(document).ready(function () {
$(".EntTab").bind("keypress", function(e) {
if (e.keyCode == 13) {
var inps = $("input, select"); //add select too
for (var x = 0; x < inps.length; x++) {
if (inps[x] == this) {
while ((inps[x]).name == (inps[x + 1]).name) {
x++;
}
if ((x + 1) < inps.length) $(inps[x + 1]).focus();
}
} e.preventDefault();
}
});
});
Did you mean something like that.

You forgot to cancel the event propagation, add return false to the keydown callback:
$(document).ready(function () {
$('.EntTab').on('keydown', function (e) {
if (e.keyCode == 13) e.keyCode = 9;
return false;
});
});
Also, Button tag in ASP.NET has UseSubmitBehavior flag set to true by default, which causes the button to be rendered as input type="submit" tag. Try setting it to false, to get the behavior like described in the following answer: Use Javascript to change which submit is activated on enter key press

Related

I want to clear textbox if date is invalid, it is working fine for tab but not working for Enter button suggest something to do with this code

<asp:TextBox ID="txtmutdate" OnTextChanged="txtmutdate_TextChanged" autocomplete="off" onblur="validatedate(this)" AutoPostBack="true" runat="server" Height="28px" Font-Size="8pt" Width="90%" CssClass="form-control"></asp:TextBox>
Javascript Function:
function validatedate(input) {
var date_regex = /^((0[1-9]|1\d|2\d|3[01])\/0[1-9]|1[0-2])\/(19|20)\d{2}$/;
if (!(date_regex.test(input.value))) {
input.value = '';
}
}
You need to check the pressed key on keyup event, if it's enter then validate date.
try this:
$("#<%=txtmutdate.ClientID%>").keyup(function(event) {
if (event.keyCode === 13) {
validatedate(this);
}
});

validate user control input value

How to validate user control textbox value on Parent page? I have the following code but it couldn't find the control. I have checked IE View Source(HTML) and this control renders as
ctl00_Management_Initiation_txtTitle_txtInput
How to get the value using JQuery? Please let me know.
User Control
<telerik:RadTextBox id="txtInput" runat="server" TextMode="MultiLine" LabelCssClass=""></telerik:RadTextBox>
<asp:image id="ImgRequired1" ImageUrl="../../images/requiredfield.gif" AlternateText="Required Field" Runat="server" Visible=false></asp:image><br />
.aspx page
<script type="text/javascript">
$(document).ready(function () {
$("#<%=btnSave.ClientID %>").click(function () {
var valid = true;
var msg = "Please fill form:\n";
if($("input[id*=txtTitle]").val().length == 0{
msg += "Title is Required!\n";
valid = false;
}
});
});
</script>
<uc1:ControlTextBox ID="txtTitle" runat="server" MaxLength="200" ></uc1:ControlTextBox>
<asp:Button ID="btnSave" name="btnSave" runat="server" Text="Save" />
if($("#<%= txtTitle.TextInputClientID %>").val().length == 0) {
There is serious lack of closing brackets, both "}" and ")" in your javascript.
Add property to your user control:
public string TextInputClientID { get { return txtInput.ClientID; } }

How to disable ENTER key when a asp.net textarea is in readonly mode

ASP.net:
<textarea id="taskNotes" runat="server" class="taskNotes" rows="10" style=""></textarea>
HTML generated ASP.net TextArea:
<textarea name="ctl00$ContentMain$taskNotes" class="taskNotes" id="ContentMain_taskNotes" style="" rows="10" readOnly="readonly"/>
How can I disable the ENTER key from executing when the textarea has the focus and readonly.
I tried the following but wasn't able to complete:
$('input[class=taskNotes]').keydown(function (e) {
if (('.taskNotes')) { // '.is()` is not populating in VS for me to complete...
if (e.keyCode === 13) {
e.preventDefault();
return false;
}
}
});
Try this instead:
Use this to prevent enter key
$(document).ready(function () {
$(document).on('keydown', '.taskNotes[readonly]', function(e){
if (e.which === 13) {
e.preventDefault();
return false;
}
});
});
Or as an alternative, use this to prevent focus of the element altogether:
$(document).ready(function () {
$(document).on('focus', '.taskNotes[readonly]', function(e){
$(this).blur();
});
});
$('.taskNotes').keydown(function (e) {
if ($(this).attr('readonly') === 'readonly' && e.keyCode === 13) {
e.preventDefault();
return false;
}
});
You need to remove the "input" from the selector. It is a textarea.
jsFiddle
To add the readonly attribute you can use:
$('.taskNotes').prop("readonly", true);
or
$('.taskNotes').attr("readonly", "readonly");
Depending on your jQuery version.
If you use ASP.Net, you want to use TextBox Server Controls.
Disabled TextBox generate disabled instead of readonly. It is more suitable for your scenario.
The way you are doing is not standard in ASP.Net, and it is really fragile. You can read Disabled and read-only controls.
<asp:Panel ID="Panel1" runat="server" DefaultButton="SubmitButton">
<asp:TextBox ID="MyTextArea" TextMode="multiline"
Columns="50" Rows="5" runat="server" />
<asp:Button runat="server" ID="SubmitButton" Text="Submit"
OnClick="SubmitButton_Click" />
</asp:Panel>
protected void Page_Load(object sender, EventArgs e)
{
MyTextArea.Enabled = false;
}

How to call javascript function on checkboxlist item selection

HTML :
<asp:CheckBoxList ID="CheckBoxList1" runat="server">
<asp:ListItem>C++</asp:ListItem>
<asp:ListItem>ASP.Net</asp:ListItem>
<asp:ListItem>Javascript</asp:ListItem>
<asp:ListItem>CSS</asp:ListItem>
<asp:ListItem>HTML</asp:ListItem>
<asp:ListItem>Java</asp:ListItem>
<asp:ListItem>Other</asp:ListItem>
</asp:CheckBoxList>
<div id="idskill">
<asp:Label ID="lblskilldescription" runat="server">Description</asp:Label>
<asp:TextBox ID="txbskilldescription" runat="server" Width="150px" OnTextChanged="TextBox8_TextChanged" Rows="5" TextMode="MultiLine"></asp:TextBox>
</div>
Scripts :
function toggleDiv()
{
$("#idskill").slideToggle("slow");
return false;
}
What I want is on selection Other div should toggle, on uncheck it should hide.
There should be "onchange" listener for the element. At least using JS we use the onchange event listener.
Try like this might help.
function list_onclick() {
var list = document.getElementById('CheckBoxList1');
var inputs = list.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked && inputs[i].value == "1") {
//do your work
}
else{
}
}
}

focus(); not working in mozilla but fine in IE and chrome

function validateForm()
{
var ddlTitle = document.getElementById('<%=ddlTitle.ClientID %>');
if (ddlTitle.value.replace(/^\s+|\s+$/, '').length < 1)
{
alert("Title should not be blank.");
ddlTitle.focus();//not working in mozilla but fine in IE and chrome
return false;
}
}
<asp:DropDownList ID="ddlTitle" runat="server" CssClass="csstextbox">
<asp:ListItem Value="">[Select]</asp:ListItem>
<asp:ListItem>Dr.</asp:ListItem>
<asp:ListItem>Dr.(Mrs.)</asp:ListItem>
</asp:DropDownList>
<asp:Button ID="btn" runat="server" CssClass="cssbutton" Text="Save" Width="60px"
OnClientClick="return validateForm();" />
This is HTML source
ddlTitle = document.getElementById('contentPlaceHolderMain_ddlTitle');
function validateForm()
{
if (ddlTitle.value.replace(/^\s+|\s+$/, '').length < 1)
{
alert("Title should not be blank.");
ddlTitle.focus();
return false;
}
}
Problem is only for dropdownlist works well for Textbox
Focus() must be setting focus try using your keyboard key Up/ down arrow and check.

Categories