After developing an ionic-1 application for iOS and Android devices, I encountered an issue with displaying mobile numbers in one of the views. The numbers are contained within <p> tags. While users can click and hold on a number to copy it on Android, this functionality is not working on iOS. I have tried implementing solutions like user-select: text; and user-select: auto;, but they did not solve the problem. How can I enable this feature for iOS as well?
Give this method a try:
angular.module('ionicApp', ['ionic'])
.controller('MyCtrl', function($scope) {
stop_browser_behavior: false
self.touchStart = function(e) {
self.startCoordinates = getPointerCoordinates(e);
if ( ionic.tap.ignoreScrollStart(e) ) {
return;
}
if( ionic.tap.containsOrIsTextInput(e.target) ) {
// do not start if the target is a text input
// if there is a touchmove on this input, then we can start the scroll
self.__hasStarted = false;
return;
}
self.__isSelectable = true;
self.__enableScrollY = true;
self.__hasStarted = true;
self.doTouchStart(e.touches, e.timeStamp);
// e.preventDefault();
};
});body {
cursor: url('https://ionicframework.com/img/finger.png'), auto;
}
ion-content{
overflow-scroll: true;
}
.scroll-content {
-webkit-user-select: auto !important;
-moz-user-select: auto !important;
-ms-user-select: auto !important;
user-select: auto !important;}
.selectable {
-webkit-user-select: auto;
}<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Template</title>
<link href="https://code.ionicframework.com/1.0.0-beta.4/css/ionic.css" rel="stylesheet">
<script src="https://code.ionicframework.com/1.0.0-beta.4/js/ionic.bundle.js"></script>
</head>
<body ng-controller="MyCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">{{myTitle}}</h1>
</ion-header-bar>
<ion-content padding="true" overflow-scroll='true'>
<h2>Content</h2>
<div class='selectable'>
Text that users should be able to select and copy.
</div>
</ion-content>
</body>
</html>Here is the input data provided: data = [ { name: "John Cena", groupName: "WWE" }, { name: "Nandini", groupName: null }, { name: "Rock", groupName: "WWE" }, { name: "Vinay", groupName: null }, { name: "Rey Mesterio", groupName: "WWE" ...
gulp-htmlmin is causing an error: events.js:183 throw er; // Unhandled 'error' event ^ Error: Parse Error: <!-- END PAGE CONTENT WRAPPER This code works fine in other projects, but when running gulp, it throws this error. How can I fix t ...
Attempting to access a Solr 4.5.0 instance located on a private server, http://12.34.56.789:8983/ The application resides at this web server address, http://www.mywebapp.com To facilitate accessing the JSON object within the Solr instance, I decided to ...
I have a situation where I have a list with two buttons, and each button triggers the same dropdown content in a sidebar component. The issue is that when I click on one button to open the dropdown, the second button does not move down to make space for it ...
$("#post_text").keydown(function(e){ // Checking if Enter key was pressed without shift key if (e.keyCode == 13) { // Prevent default behavior e.preventDefault(); } if (e.keyCode == 13 && !e.shiftKey) { alert('test'); } }); I a ...
Currently, I am using Laravel in my project and I need to modify the patient's status when they schedule an appointment with a doctor. The patient can have one of three statuses: Accept, Waiting (automatically assigned when the patient selects a date ...
Is there a way to ensure that the value in input 'ia' stays synchronized with the model value, even if it gets out of sync (e.g. if you type in 'aaa')? I am looking for a solution where when the input 'ia' loses focus, its val ...
I am encountering an issue with my code that involves a factory: angular.module("mainApp", ["kendo.directives"]) .factory("getFormats", function() { var searchStr="list&John&1&1".substr(1); //I can see the searchStr here ...
Help needed with signup controller code! app.controller('SignupController', function ($scope, $http, $window) { $scope.submitSignup = function () { var newUser = { username: $scope.username, ...
I am trying to set up a bootstrap carousel where clicking on an image inside it will trigger a self-made lightbox. However, I am facing some issues with the JavaScript code not being triggered with the following syntax: $('html').on("click", ".l ...
I am trying to display some JSON data in a div, but the current code is not working. Can anyone suggest where I should make changes? <div class="risktable"> </div> $.ajax({ contentType:'application/json', data: {"sp ...
I have set up a virtual environment using A-frame () with some raining effects and a button. What I want to achieve is to have a function executed when the button is clicked, that function should remove the rain component from the scene. Here is the code s ...
I have been experimenting with trying to make an image appear as if it is floating by using jQuery to animate it vertically. After some research, I stumbled upon this thread: Animating a div up and down repeatedly which seems to have the solution I need. H ...
I'm currently attempting to use code I found on Github to insert data into a Firestore database, but unfortunately, I keep encountering an error. Here's the specific error message: 21:1 error Expected catch() or return promise/catch-or-re ...
Attempting to create sortable columns in a table using the 'orderBy' filter. The code looks like this: JS: retrieving data using $http.get in the controller sample Json: $scope.items = [{id:111, name:'AAA', value:120.5}, {id:222, ...
Currently, I am in the process of retrieving data using Parse through the REST API in Javascript. Everything is working fine until I attempt to include a limit and an offset ("skip"). Here, you can find the documentation for using parameters with a REST ...
Hi everyone, this is my first time posting a question here so please be gentle :) I recently implemented a script to change the CSS of my navbar when scrolling. window.addEventListener("scroll", function () { let header = document.querySelector(".navbar") ...
I need help figuring out how to stack one or more <div> elements on top of another <div> element while maintaining the text content within each. My issue is illustrated in this fiddle: https://jsfiddle.net/rd268ucy/1/. When attempting to drag o ...
I have an express app running on a Node.js server hosted on Azure Linux VM, and I am looking to access this website from my personal computer. const express = require('express'); const app = express(); app.listen(3000, () => { console.lo ...
Seeking advice on best practices for improving the following scenario: I have a single global reusable component called <MainMenu>. Within this component, I am making an XHR request to fetch menu items. If I place <MainMenu> in both the heade ...