html 5,css 3,jsいくつかの実用的なコードシート

Inputコントロールのスペース入力を禁止

input身分証明書番号の入力

Input電話番号入力

inputは数字と点しか入力できません

以上のinputはキーボード入力時のみフィルタリングが可能ですが、貼り付け時にpasteイベントを使用できる場合はsettimeoutを使用してinputの内容を取得する必要があります.

$(".text").bind("paste", function() {
				var el = $(this);
				setTimeout(function() {
					var text = $(el).val();
					text = text.replace(/\D/g,'');
					$(el).val(text);
				}, 100);
			});

text-align:rightはAndroid 4.4(または一部のブラウザの下)以下でplaceholderを使用して右に移動できません

::-webkit-input-placeholder { /* WebKit browsers */ direction: rtl;}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ direction: rtl;}
::-moz-placeholder { /* Mozilla Firefox 19+ but I'm not sure about working */ direction: rtl;}
:-ms-input-placeholder { /* Internet Explorer 10+ */ direction: rtl;} 

placeholder色の変更

::-webkit-input-placeholder { /* WebKit browsers */ 
color: #c3c3c3; 
} 
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
color: #c3c3c3; 
} 
::-moz-placeholder { /* Mozilla Firefox 19+ */ 
color: #c3c3c3; 
} 
:-ms-input-placeholder { /* Internet Explorer 10+ */ 
color: #c3c3c3; 
}

iPhoneのsafariでoverflow:hidden無効

body {
	position: relative;
	overflow-x: hidden;
}

モバイルデバイスで擬似要素:after:beforeを使用して枠線を実装

.border:before{
		    position: absolute;
		    height: 1px;
		    left:0;
		    right:0;
		    top:1px;
		    content: '';
		    -webkit-transform: scaleY(.5);/*  ：      0.5px*/
		    transform: scaleY(.5);
		    background-color: #eee;
		}
.border:after{
		    position: absolute;
		    height: 1px;
		    left:0;
		    right:0;
		    bottom:1px;
		    content: '';
		    -webkit-transform: scaleY(.5);/*  ：      0.5px*/
		    transform: scaleY(.5);
		    background-color: #eee;
		}

絶対位置の要素を垂直方向に中央に配置

                /**   **/
		.box2{
			position: absolute;
			width:100px;
			height: 100px;
			border:1px solid red;
			margin: auto;
			left:0;
			top:0;
			right:0;
			bottom: 0;
		}
		/**   **/
		.box3{
			position: absolute;
			width:100px;
			height: 100px;
			left:50%;
			top:50%;
			transform:  translate(-50%,-50%);
			border:1px solid red;
		}

/**   **/
.box4{
position:absolute;top:0;right:1rem;bottom:0;left:1rem;margin:auto;width:9rem
}

html5     QQ,            ,             ，android，ios   ，   android    ，              。

 
  
 
  
qq    
  
		
		qq を く
		
		  のチャット
  
iosのinputコントロールのデフォルトにはシャドウフィレットアトリビュートがあります.特にbuttonにはグラデーション効果もあります.スタイルを統一するためにcssで設定できます.
* {
				margin: 0;
				padding: 0;
				-webkit-tap-highlight-color: transparent;/*         */
				-webkit-appearance: none;/*  ios    */
				outline: none;/*  chrome input      ，    */
			}
  
モバイル端末開発の際、解像度に応じてremを単位として使用することができ、remは相対長さ単位であり、ルート要素htmlの大きさに対してiphone 6では1 rem=20 pxで換算することができる.375 px未満の装置では縮小処理を行わず、375 px幅より大きい装置を等比スケーリングする.
html {
				font-size: 20px;
			}
			
			@media only screen and (min-width: 400px){ 
				html {
				font-size: 21.33333333px !important;}
			}
			@media only screen and (min-width: 414px) {
				html {
				font-size: 22.08px !important;}
			}
			
			@media only screen and (min-width: 480px){
				 html {
					font-size: 25.6px !important;
				}
			}
  
ページクリック禁止
$(document).ready(function() {
				$(document).bind("contextmenu", function(e) {
					return false;
				});
			});