Web Front-end
JS Tutorial
What should I do if text cannot be copied or pasted by long pressing in the ionic app?
What should I do if text cannot be copied or pasted by long pressing in the ionic app?
This time I will bring you what to do if the text in the ionic application cannot be copied and pasted by long pressing. What are the precautions to solve the problem that the text in the ionic application cannot be copied and pasted by long pressing. The following is a practical case. Let’s take a look.
The project is about to go online, but it encountered a strange problem. The text in ionic cannot be copied and pasted like a normal wap page.
I looked through official documents and Chinese websites, but there is no explanation on this issue.
The following URL is the first result of Google search:
http://ionichina.com/topic/55d18fff628dd6dc21b07d75
I have tried all the methods here, but they are not ideal.
Later, after searching for information from various sources, this problem was solved. Share it with everyone next.
Go directly to the code:
html part
<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文字复制问题</title>
<link href="http://code.ionicframework.com/1.0.0-beta.4/css/ionic.css" rel="stylesheet">
<script src="http://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">ionic 测试copy</h1>
</ion-header-bar>
<ion-content overflow-scroll='true'>
<div class="selectable">幻灯片1测试文字，试试可以复制</div>
</ion-content></body></html>css part
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;//控制网页内容选择范围
}js part
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();};
});We can see through the code, First, add overflow-scroll='true' in the html, and then add a custom class on the container where we want to copy the text. In the code, we add '.selectable' and set our css style on this class. .
It should be noted here that this custom class cannot be added to the specific tag of ionic. As follows:
<ion-content class="selectable" overflow-scroll="true">
It is invalid to write it like this. We must write it like this:
<ion-content overflow-scroll='true'>
<div class="selectable">幻灯片1测试文字，试试可以复制</div> </ion-content>means that I didn’t write it correctly because of this. Debugging After a long time, I can’t get the effect. . . .
The last step is to copy the above js code in the controller corresponding to the page.
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Related reading:
How to implement mvvm-style tabs in Angularjs? Case + code
Vue2.0 project very practical code collection
The above is the detailed content of What should I do if text cannot be copied or pasted by long pressing in the ionic app?. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to copy lyrics from QQ Music How to copy lyrics
Mar 12, 2024 pm 08:22 PM
We users should be able to understand the diversity of some functions when using this platform. We know that the lyrics of some songs are very well written. Sometimes we even listen to it several times and feel that the meaning is very profound. So if we want to understand the meaning of it, we want to copy it directly and use it as copywriting. However, if we want to use it, we still need to You just need to learn how to copy lyrics. I believe that everyone is familiar with these operations, but it is indeed a bit difficult to operate on a mobile phone. So in order to give you a better understanding, today the editor is here to help you. A good explanation of some of the above operating experiences. If you also like it, come and take a look with the editor. Don’t miss it.
What is the shortcut key for copying?
Mar 10, 2023 pm 02:00 PM
The shortcut key for copying is "Ctrl+c", and the corresponding paste key is "Ctrl+v"; on the computer, use the mouse to drag and select text, hold down Ctrl, and then click the C key to complete the copy; A shortcut key refers to completing an operation through certain specific keys, key sequences, or key combinations.
PS copy layer shortcut key
Feb 23, 2024 pm 02:34 PM
In the PS copy layer shortcut keys, we can know that if you want to copy a layer when using PS, you can use the shortcut key [Ctrl+J] for quick copying. This introduction to the shortcut keys for copying layers can tell you the specific operation method. The following is the detailed content, so take a look. PS copy layer shortcut key answer: [Ctrl+J] Specific method: 1. Open the image in PS and select the layer that needs to be copied. 2. Press [Ctrl+J] on the keyboard at the same time to complete the copy of the layer. Other copying methods: 1. After opening the image, press and hold the layer and move the [New Layer] icon downwards. 2. After moving to the icon, let go. 3. The layer copy is completed.
Learn to use copy-paste shortcuts
Jan 13, 2024 pm 12:27 PM
When many users use computers, if they encounter something that needs to be copied and pasted, it is very troublesome to copy with the mouse. So how to use the shortcut keys for copy and paste? Come and take a look at the detailed tutorial ~ Copy and paste shortcuts How to use the key: 1. Copy key: Ctrl+C, select the text or image to be copied, and press the shortcut key. 2. Paste key: Ctrl+V. Just press the shortcut key directly where you want to paste.
How to copy a table in Excel and keep the original format?
Mar 21, 2024 am 10:26 AM
We often use Excel to process multiple table data. After copying and pasting the set table, the original format returns to the default, and we have to reset it. In fact, there is a way to make the Excel copy table retain the original format. The editor will explain the specific method to you below. 1. Ctrl key dragging and copying operation steps: Use the shortcut key [Ctrl+A] to select all table contents, then move the mouse cursor to the edge of the table until the moving cursor appears. Press and hold the [Ctrl] key, and then drag the table to the desired position to complete the movement. It should be noted that this method only works on a single worksheet and cannot be moved between different worksheets. 2. Steps for selective pasting: Press the [Ctrl+A] shortcut key to select all tables, and press
How to copy and move drag-and-drop elements in Vue?
Jun 25, 2023 am 08:35 AM
Vue is a popular JavaScript framework that provides a convenient drag-and-drop function, allowing us to easily copy and move elements. Next, let's take a look at how to copy and move drag-and-drop elements in Vue. 1. Basic implementation of drag-and-drop elements To copy and move drag-and-drop elements in Vue, you first need to implement the basic drag-and-drop function of the element. The specific implementation method is as follows: Add the elements that need to be dragged in the template: <divclass="drag-elem"
What should I add to the copy shortcut key ctrl?
Mar 15, 2024 am 09:57 AM
On Windows, the shortcut key for copying is Ctrl C; on Apple, the shortcut key for copying is Command C; on Linux, the shortcut key for copying is Ctrl Shift C. Knowing these shortcut keys can improve the user's work efficiency and facilitate text or file copy operations.
What is the difference between cut and copy
Mar 22, 2024 pm 03:58 PM
1. Cutting refers to the operation of moving selected content from one position to another. 2. The copy operation creates a copy of the selected content and saves the copy in the system clipboard, and the original content will remain in its original location. 3. If the user wants to move the content to another location and delete the content in the original location, they can use the cut operation. 4. If the user needs to create a copy of the content and paste it elsewhere without affecting the original content, then use the copy operation.
