How to use click-and-hold action with angularjs if I want to make a mobile likely keypad?

Question

I have made a keypad with angularjs for a client. It is working correctly,
Here is my angularjs function that handles to pressing a button:

$scope.pressButton = function(button) {

    var dialpadInput = document.getElementById("dialpadText"),

        dialpadText = dialpadInput.value,

        dialpadCursor = dialpadInput.selectionStart,

        dialpadFirstPart, dialpadSecondPart, strLength;



    dialpadFirstPart = dialpadText.substr(0, dialpadCursor);

    dialpadSecondPart = dialpadText.substr(Math.abs(dialpadCursor));

    dialpadText = dialpadFirstPart + button.number + dialpadSecondPart;

    document.getElementById("dialpadText").value = dialpadText;

    strLength = dialpadText.length * 2;

    dialpadInput.focus();

    dialpadInput.setSelectionRange(strLength, strLength);

    $scope.dialpadTextEntered();

};

Also, here is my html side:

<div id="lightbox-dialpad">

    <div class="lightbox-content-column lightbox-dialpad-content">

        <div  class="dialpad">

            <div class="dialpad-top">

                <input type="text" id="dialpadText" call-from-dialpad="startAudioCall()" ng-model="dialpadText" ng-change="dialpadTextEntered()" placeholder="{{languageData.DIALPAD.PLACEHOLDER}}" autofocus/>

                <div class="icon-dialpad-backspace" ng-click="backspaceNumber()"></div>

            </div>

            <ul class="dialpad-table">

                <li ng-repeat="button in buttons" class="dialpad-button" ng-click="pressButton(button)" ng-mousedown='mouseDown()' ng-mouseup="mouseUp()">

                    <div class="number">{{button.number}}</div>

                    <div class="letters">{{button.letters}}</div>

                </li>

            </ul>

            <div class="clearfix"></div>

            <div class="row dialpad-bottom-buttons">

                <span ng-if="$root.isMicrophonePluggedIn" class="action-button icon-audio-call-button icon-circle" ng-click="startAudioCall()"></span>

                <span ng-if="$root.isMicrophonePluggedIn && $root.isCameraPluggedIn" class="action-button icon-video-call-button icon-circle" ng-click="startVideoCall()"></span>

            </div>

        </div>

    </div>

    <system-message add-class="lightbox-system-message error-message-container" warning="true" message="message" open="open"></system-message>

</div>

But I need to change one thing. So my keypad is looks like this:

Now, since this is a computer based program, user can write his/her inputs with either by clicking the keypad buttons or from the keyboard. So the thing is I need to change "0" button functionality. What I want to do with it is, if user pressed or clicked one time to "0", it must put "0" to my text line, but if user holds a mouse click on "0", I need to change "0" to "+" sign. So basicly, I want to implement a type of mobile keypad into my client. I found this but it didn't work on my side, or I did something wrong.

Any help will be greatly appreciated.

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

I couldn't find any answer to my question yet, so I mapped "00" to "+" sign. That did work well too.

How to use click-and-hold action with angularjs if I want to make a mobile likely keypad?

Sign up