Touch events and keyboard operations in mobile development

How to turn off keyboard auto capitalization in iOS:

We know that in iOS, when the virtual keyboard pops up, by default the keyboard is the first capitalization feature, depending on the business scenario, we may need to turn this feature off, mobile version WebKit provides the autocapitalize attribute for the INPUT element, Turn off the default initial capitalization of the keyboard by specifying autocapitalize= "off".

How to completely prevent users from opening a page in a new window in iOS

Sometimes we may need to prevent users from opening the page in a new window, we can use the A-tag target= "_self" to specify that the user opens in a new window, or the target property remains empty, but you will find that the iOS user at the top of the link long press 3 seconds, iOS will pop up a list button , the user can still open the page in a new window by using these buttons, so the target property specified by the developer is invalidated, but the iOS pop-up button can be disabled by specifying the-webkit-touch-callout style property of the current element to none. This technique is only valid for iOS for Android platforms.

How to Resolve box border overflow:

When you specify a block-level element, and you define a border for it, set its width to 100%. In the mobile device development process We usually define the text box as width 100%, define it as a block-level element for full-screen adaptive style, but you will find that the element's border (left and right) each pixel will overflow the document, resulting in a horizontal scroll bar, in order to solve this problem, we can add a special The style of the-webkit-box-sizing:border-box, which specifies the size of the box to include the width of the border.

The effect of mobile touch screen sliding is actually the picture carousel, which is well implemented on the PC's page, binding the click and MouseOver events to complete. But on mobile devices, to achieve this kind of carousel effect, you need to use the core touch event. Handle touch events to track each finger to the screen slide.
Here are four kinds of touch events
Touchstart: Triggers when the finger is placed on the screen
Touchmove://finger on-screen swipe trigger
Touchend://trigger when finger leaves screen
Touchcancel://The system cancels the touch event when triggered, this seems to be less use

Once each touch event is triggered, an event object is generated and the event object includes the following three touch lists in addition
Touches://List of all fingers on the current screen
Targettouches://The list of fingers on the current DOM element, try to use this instead of touches
Changedtouches://List of fingers that involve the current event, try to use this instead of touches
Each touch in these lists consists of the touch object, which contains the touching information, with the following main attributes:
Clientx/clienty://Touch point relative to the location of the browser window
Pagex/pagey://Touch point relative to the position of the page
Screenx/screeny://Touch point relative to the position of the screen
Identifier: ID of the//touch object
Target://Current DOM element

Attention:
When you swipe the entire screen, your finger affects the browser's behavior, such as scrolling and zooming. So when you invoke the touch event, be careful to suppress zooming and scrolling.
1. Disable zooming
Set with meta meta tags.
<meta name= "viewport" content= "Target-densitydpi=320,width=640,user-scalable=no" >
2. Disable scrolling
Preventdefault is blocking the default behavior, and the default behavior of the touch event is scrolling.
Event.preventdefault ();

Box.addeventlistener (' Touchmove ', function (event)
{//If there is only one finger in the position of this element
if (event.targetTouches.length = = 1)
{
var touch = event.targettouches[0];
Place the element where the finger is located
Box.style.left = Touch.pagex + ' px ';
Box.style.top = touch.pagey + ' px ';
}
}, False);

Touch events and keyboard operations in mobile development