How can the first character position be reached by moving the cursor using the jquery mask plugin?

I have done a lot of research but couldn't find the exact same question with a satisfactory answer. Therefore, I decided to ask a more specific question. I am using the Jquery mask plugin and I want my cursor to always be at the beginning of the textbox no matter where I click. Currently, whenever I click into the textbox, the cursor goes to that position. How can I prevent this behavior?

 <asp:TextBox ID="tbMobile" CssClass="ContactNumber" runat="server" onfocus="GetPhoneMask();" MaxLength="15" placeholder="555-555-5555" ValidationGroup="Application"></asp:TextBox>

function GetPhoneMask() {
        $(".ContactNumber").mask("999-999-9999", { autoclear: false });
    }

Updated: https://i.stack.imgur.com/8SZgZ.png

javascriptc#asp.netjquery-pluginsjquery-mask

Answer №1

Original link https://dotnetfiddle.net/Gipb8h

I made a modification to the phone class name.

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebFormsPW._Default" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.updated_phone').mask('(000) 000-0000');
        })
        //removed
        //function GetPhoneMask() {
        //    $(".ContactNumber").mask("999-999-9999", { autoclear: false });
        //}
    </script>
    <%--    removed onfocus="GetPhoneMask();"--%>
    <asp:TextBox ID="tbMobile" CssClass="updated_phone" runat="server" MaxLength="15" placeholder="555-555-5555" ValidationGroup="Application"></asp:TextBox>
</asp:Content>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the Power of Two jQuery Ajax Functions in Your Script

Is it possible to provide guidance on how I can successfully execute two separate Ajax calls within a single script without encountering conflicts? A sample of the current script structure is as follows: <script type="text/javascript"> $(document).r ...

javascriptjqueryajax

Potential Javascript timing problem encountered during webpage initialization – involving the implementation of a dynamic bootstrap progress

I have limited knowledge of javascript, but I stumbled upon this amazing fiddle that I would like to incorporate into my project: http://jsfiddle.net/5w5ku/1/ The issue I am facing is that I want it to persist for a duration of ten minutes. Despite atte ...

javascripttwitter-bootstrap

Minimize a collection of JavaScript objects

I am working with an Array of objects where I need to return the collection as an Object, with the key names being the indexes of their length. Additionally, I have to filter this object based on its values. Check out my code snippet below: const data = ...

javascriptfilterreduce

What is the best way to use a handlebar ternary operation to dynamically add an HTML element in AngularJS?

Please Note: When I refer to "handlebars," I am not talking about Handlebars.js, but rather the double curly braces. I have a table where I need to display data in one of the columns along with an additional HTML element based on the result of a ternary o ...

javascriptjqueryhtmlangularjs

Is there a way to cancel hiding on a q-dialog?

I'm currently working on integrating a confirmation modal within a dialog box that includes form input fields. The purpose is to alert the user when they try to exit without saving their changes. The modal should appear every time the user modifies th ...

javascripthtmlvue.jsdialogquasar

Does ECMAScript differentiate between uppercase and lowercase letters?

It has come to my attention that JavaScript (the programming language that adheres to the specification) is sensitive to case. For instance, variable names: let myVar = 1 let MyVar = 2 // distinct :) I have not found any evidence in the official specific ...

javascript

Meteor twilio SMS feature not functioning properly

I'm currently using the Twilio node for sending SMS, but I've encountered an error: sendSms is not defined Within my server folder, here is the Twilio file I have: import twilio from "twilio"; sms = { accountSid: "xxxxxxxxxxxxxxxxxxxxxxx ...

javascriptnode.jsmeteortwiliotwilio-api

Determining if an emitted event value has been altered in Angular 4

I am currently working on an Angular 4 project. One of the features I have implemented is a search component, where users can input a string. Upon submission of the value, I send this value from the SearchComponent to the DisplayComponent. The process of ...

javascriptangulartypescriptobservable

Ways to detect the use of vue.js on a webpage without relying on vue-devtools

One way to determine if the page is utilizing Angular or AngularJS is by inspecting window.ng and window.angular. Is there a similar method to identify whether Vue is being used on the page directly from the console, without relying on vue-devtools? ...

javascripthtmlvue.js

Angular response object being iterated through in a loop

I am facing a challenge while trying to iterate through an array containing values that need to be displayed to the user. Despite receiving a response with the data, I am having trouble accessing and looping through the elements of the array using Angular. ...

c#arraysangulartypescriptloops

Delay in displaying Promise API call in NextJS

Currently, I am encountering an issue while making calls to an API function that I have already set up and confirmed to work flawlessly in other projects. Interestingly, I have utilized the same backend API calling method in another project as well as with ...

javascriptreactjsnext.jsreact-query

Fundamental JavaScript feature experiencing functionality issues

Greetings, this is my debut in this space and I am encountering some challenges as a beginner in the world of coding. It seems that passing arguments to parameters is where I'm hitting a roadblock, or perhaps there's a simple detail that I'm ...

javascriptfunctionjscript

Use jquery ajax to upload an image with a reusable input field

UPDATE: Progress has been made in solving this issue. Please refer to Jquery form no submission to IE7 and IE8. The main task remaining is sorting out the compatibility with IE7 and IE8. I have been utilizing THIS plugin to upload files as email attachmen ...

phpjavascriptjqueryjquery-plugins

Using .get methods with jQuery's .on

I need to retrieve the tag name of the element that is clicked inside an li when the user interacts with it. The li element gets dynamically added to the HTML code. I have implemented the following code, but unfortunately, it does not seem to be functionin ...

javascriptjqueryhtml

Attempting to load an image through an AJAX Request may prove to be unsuccessful

I am facing an issue with using an AJAX request to load a gif image from the following source: Despite my attempts, using the response on the image source like this: $('#cat-thumb-1').attr('src', 'data:image/gif;base64,' + d ...

javascriptjqueryajaximage

Sharing controller methods in Angular.js is a key aspect of enhancing

In my current project, I originally used Knockout for the CMS functionality, but decided to switch to Angular because I preferred its features. One of the key sections in the CMS is dedicated to 'Users', featuring a table where headers can be cli ...

javascriptangularjs

What causes variations in versions displayed by Node.js?

What causes this error to appear when using node version v16.17.1? ERROR: npm is known not to run on Node.js v10.19.0 UP--- I had multiple versions of node installed, with the default being an older version. I was able to resolve the issue by using nvm. ...

javascriptnode.js

Troubleshooting overlap problem between Skrollr and SlickNav

I successfully implemented Skrollr to fix images, similar to this example: Additionally, I am utilizing Slicknav for the menu functionality. However, I encountered an issue where the menu opens behind the fixed "parallax" image. Despite trying various ap ...

javascripthtmlcssskrollrslicknav

Utilize Google Home to browse through nearby websites and respond to inquiries by incorporating Javascript

Can Google Home be programmed to read from a local webpage and provide answers based on the content of that page through Javascript? ...

javascriptactions-on-googlegoogle-home

Navigating data in a Json array object

Can someone assist me in retrieving data from a JSON array file stored at the following link? Html <div> <div v-for="data in myJson.id " >{{ data }}</div> </div> js import json from '.././json/data.json&apo ...

javascriptarraysjsonvue.jsvuejs2