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

Using nested JSON in POST request input

When utilizing Fiddler to invoke my method, I am now facing an issue with the parameters. The structure of these parameters is as follows: {"timestamp":"", "json": { "something":[{"text":"bla","status":"1"},{"text":"sfdf","status":"1"}], ...

c#jsonwcfrest

As my character slides off the moving platform in this exciting Javascript canvas game, my heart

Can anyone help me figure out how to keep my player on the moving platform? I'm not sure if I need to add gravity or something else. I'm still learning the ropes. export function checkTopCollision({ item1, item2 }) { return ( item1.y + item ...

javascripthtmlcanvas

Breaking down JavaScript arrays into smaller parts can be referred to

Our dataset consists of around 40,000 entries that failed to synchronize with an external system. The external system requires the data to be in the form of subarrays sorted by ID and created date ascending, taken from the main array itself. Each ID can ha ...

javascriptnode.jslodashunderscore.js

Tips for displaying "onclick" content beside dynamically generated content

I am working on a feature where a dynamically generated list has radio buttons displayed next to it. The goal is to show a dropdown list next to the specific radio button and list item that was changed. Essentially, if the radio button is set to "yes," I w ...

javascriptphpjqueryajaxjquery-events

Having trouble retrieving the accurate div id when selecting multiple div elements with Selenium's FindElements() method

My goal is to search for all the div elements under a specified XPath with a div id. The div id is randomly generated and not fixed, so I am using a partial ID method since some text of the div id remains constant. The constant part is followed by _ariaId_ ...

c#seleniumselenium-webdriverselenium-chromedriver

Is there a way to determine the actual time or percentage completion of a file upload using Telerik RadUpload?

Utilizing the Telerik upload file control with manager is a key component of my project: <telerik:RadUpload ID="RadUpload" Runat="server" MaxFileInputsCount="5" /> <telerik:RadProgressManager ID="RadProgressManager" Runat="server" /> For clie ...

javascriptjqueryasp.nettelerik

A step-by-step guide on deploying an application using ASP.NET Core and Angular within Visual Studio

I recently completed a tutorial on integrating ASP.NET Core with Angular, which you can find at this link. After following the tutorial, I successfully set up a solution that includes both a backend ASP.NET Core and an angular client application. However ...

asp.netangularvisual-studio

I'm having trouble locating my route for some unknown reason

I've set up a basic code structure to test my routes, but I keep getting a 404 error. Although I have an app.all function to catch errors, I'm having trouble pinpointing where the issue lies. Below is my index.js file, where I've configured ...

javascriptexpressuuid

Stopping the sound when its' Div is hovered over

I've managed to successfully trigger the audio to play on hover, but I'm having trouble getting it to pause when my mouse leaves the area. Check out the code in action here: https://jsfiddle.net/jzhang172/nLm9bxnw/1/ $(document).ready(functio ...

javascriptjqueryhtmlcss

What issues could potentially arise from utilizing the MIME type application/json?

I'm currently developing a web service that needs to return JSON data. After doing some research, I found recommendations to use application/json. However, I am concerned about potential issues this may cause. Will older browsers like IE6+, Firefox, ...

javascriptjsoncross-browsercontent-typemime-types

Is there a way to incorporate a computed value into a table prop while working with Element UI?

In my frontend development, I am utilizing vuejs along with element ui. I am faced with the task of rendering a table that includes dates in unix format. To make these dates more user-friendly, I have incorporated moment.js to convert them into a readable ...

javascriptvue.jselement-ui

When setting up Vue.js for unit testing, the default installation may show a message stating that

Recently set up a fresh Vue project on Windows 7 using the VueJS UI utility. Unit testing with Jest enabled and added babel to the mix. However, when running "npm test" in the command line, an error is returned stating 'Error: no test specified' ...

javascriptnode.jsunit-testingvue.jsbabeljs

Handling typeError in Vue.js JavaScript filter for object manipulation

I need to sort an object based on state names (e.g. Berlin, Bayern ...). Below is the API response I received. "states":{ "Bayern":{ "total":13124737, "rs":"09", "va ...

javascriptvue.jsobject

utilizing array.map() to nest multiple layers of arrays

I am facing a challenge with a JavaScript array structure that contains three top-level objects. Each of these objects has an "teamLineup" array, which in turn holds two more objects named "team". These "team" objects have another array called "starters", ...

javascript

Troubleshooting: NextJS Typescript getInitialProps returning null value

I am currently working with NextJS 'latest' and TypeScript to extract the token from the URL, but I am encountering an issue where it returns undefined. To achieve this, I am utilizing the getInitialProps method. The URL in question looks like th ...

javascriptnode.jsreactjstypescriptnext.js

Organize data that is deeply nested

Struggling to normalize deeply nested API response data? Look no further than https://github.com/paularmstrong/normalizr. This tool can help simplify your data structure. For example, if your input data looks like this: const data = [{ id: 'compone ...

javascriptarraysjsonnormalizationnormalizr

Implementing a timed delay before assigning a class in the state

I am trying to implement a delay before applying for a new class. This is my current situation const [isDone, setIsDone] = useState<boolean>(false); Within a method, I have the following code snippet const myMethod = () => { .... .... se ...

javascriptreactjsreact-reduxmaterial-uireact-hooks

Dynamic inheritance in Node.js based on the version being used

Why does the code provided only function correctly in Node.js versions 5.x and 6.x, but not in versions 4.x and older? Is there a way to modify the code so that it can work across Node.js versions 0.10.x - 6.x? 'use strict'; var util = require ...

javascriptnode.js

Differences between JavaScript's window.onload and body.onload functionsWhen

My inquiry is similar yet slightly distinct from the one queried here: window.onload vs <body onload=""/> The comparison in that prior query was between utilizing window.onload and inline js. My question pertains to the disparity between ...

javascripthtmlcss

Utilizing AngularJS to iterate over a single extensive unordered list

In my current Angular app, the JSON structure is as follows: 0: Object $$hashKey: "004" Date: "2014-04-17" Items: Array[3] 1: Object $$hashKey: "005" Date: "2014-04-18" Items: Array[3] 2: Object $$hashKey: "006" ...

javascriptjqueryjsonangularjs