Prometheus Prometheus - 16 days ago 6
AngularJS Question

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

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:

enter image description here

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.

Answer

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