diff --git a/2.html b/2.html deleted file mode 100644 index d02d898..0000000 --- a/2.html +++ /dev/null @@ -1,159 +0,0 @@ - - - - - - 可点击其他元素+保持光标不丢 - - - -
- -
- 点击这里输入...点击下方按钮/链接/区域，它们能正常工作，光标也不会消失 -
- - - - - - - -
- - - - diff --git a/contenteditable-accessory.html b/contenteditable-accessory.html deleted file mode 100644 index bb8c7bf..0000000 --- a/contenteditable-accessory.html +++ /dev/null @@ -1,234 +0,0 @@ - - - - - - Contenteditable 键盘辅助栏 - - - -
-

Contenteditable 键盘辅助栏

- -
-
-
- -
-
-
-
- - -
- - - -
- - - - diff --git a/css/index.css b/css/index.css index 1058265..6841463 100644 --- a/css/index.css +++ b/css/index.css @@ -53,11 +53,12 @@ editor { } .container .title-box { width: 9.4rem; - margin: 0 auto 0.4rem; + margin: 0 auto 0.6rem; background-color: #ffffff; border: 0.0133rem solid #f2f2f2; border-radius: 0.4rem; - padding: 0.4rem; + padding: 0.4rem 0.4rem 0.6rem; + position: relative; } .container .title-box .input { width: 100%; @@ -72,6 +73,13 @@ editor { .container .title-box .input::placeholder { color: #757575; } +.container .title-box .sum { + position: absolute; + right: 0.4rem; + bottom: 0.1rem; + color: #555555; + font-size: 14px; +} .container .editor-box { width: 9.4rem; margin: 0 auto 0.4rem; @@ -330,6 +338,79 @@ editor { width: 100%; height: 2.2667rem; } +.container .model-container { + width: 100%; + height: 100vh; + position: fixed; + top: 0; + left: 0; + z-index: 1000; + display: flex; + justify-content: center; + align-items: center; +} +.container .model-container .model-main { + position: relative; + z-index: 9; + width: 80%; + background-color: #ffffff; + border-radius: 10px; + overflow: hidden; + text-align: center; +} +.container .model-container .model-main .model-title { + font-size: 18px; + color: #333; + width: 100%; + padding: 18px; + font-weight: bold; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.container .model-container .model-main .model-content { + font-size: 16px; + color: #666; + padding: 10px; + padding-top: 0px; + padding-bottom: 20px; +} +.container .model-container .model-main .model-buttons { + width: 100%; + display: flex; + align-items: center; +} +.container .model-container .model-main .model-buttons .button { + flex: 1; + padding: 18px 10px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + font-size: 16px; + outline: none; + background-color: #ffffff; + border-top: 1px solid #f2f2f2; + border-right: 1px solid #f2f2f2; +} +.container .model-container .model-main .model-buttons .button.confirm { + color: var(--theme); + font-weight: bold; +} +.container .model-container .model-main .model-buttons .button:last-child { + border-right: 0; +} +.container .model-container .model-main .model-buttons .button:active { + background-color: #f2f2f2; +} +.container .model-container .model-mask { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + z-index: 1; + background-color: rgba(0, 0, 0, 0.45); +} .btn-f { position: fixed; top: 50px; diff --git a/css/index.less b/css/index.less index 579b6d6..6c90674 100644 --- a/css/index.less +++ b/css/index.less @@ -64,11 +64,12 @@ editor { .title-box { width: 9.4rem; - margin: 0 auto 0.4rem; - background-color: rgba(255, 255, 255, 1); - border: 0.0133rem solid rgba(242, 242, 242, 1); + margin: 0 auto 0.6rem; + background-color: #ffffff; + border: 0.0133rem solid #f2f2f2; border-radius: 0.4rem; - padding: 0.4rem; + padding: 0.4rem 0.4rem 0.6rem; + position: relative; .input { width: 100%; @@ -83,6 +84,14 @@ editor { color: rgba(117, 117, 117, 1); } } + + .sum { + position: absolute; + right: 0.4rem; + bottom: 0.1rem; + color: rgb(85, 85, 85); + font-size: 14px; + } } .editor-box { @@ -388,6 +397,80 @@ editor { } } } + + .model-container { + width: 100%; + height: 100vh; + position: fixed; + top: 0; + left: 0; + z-index: 1000; + display: flex; + justify-content: center; + align-items: center; + .model-main { + position: relative; + z-index: 9; + width: 80%; + background-color: #ffffff; + border-radius: 10px; + overflow: hidden; + text-align: center; + .model-title { + font-size: 18px; + color: #333; + width: 100%; + padding: 18px; + font-weight: bold; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + .model-content { + font-size: 16px; + color: #666; + padding: 10px; + padding-top: 0px; + padding-bottom: 20px; + } + .model-buttons { + width: 100%; + display: flex; + align-items: center; + .button { + flex: 1; + padding: 18px 10px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + font-size: 16px; + outline: none; + background-color: #ffffff; + border-top: 1px solid #f2f2f2; + border-right: 1px solid #f2f2f2; + &.confirm { + color: var(--theme); + font-weight: bold; + } + &:last-child { + border-right: 0; + } + &:active { + background-color: #f2f2f2; + } + } + } + } + .model-mask { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + z-index: 1; + background-color: rgba(0, 0, 0, 0.45); + } + } } .btn-f { diff --git a/fixed-keyboard-accessory.html b/fixed-keyboard-accessory.html deleted file mode 100644 index a49b3b1..0000000 --- a/fixed-keyboard-accessory.html +++ /dev/null @@ -1,265 +0,0 @@ - - - - - - 固定定位的键盘辅助栏 - - - -
-

固定定位的键盘辅助栏

-
- -
- - -
-

滚动页面测试辅助栏是否固定...

-

中间位置...

-

底部位置...

-
-
- - -
- - - -
- - - - - \ No newline at end of file diff --git a/ios-keyboard-accessory.html b/ios-keyboard-accessory.html deleted file mode 100644 index 4a4b784..0000000 --- a/ios-keyboard-accessory.html +++ /dev/null @@ -1,247 +0,0 @@ - - - - - - iOS 适配键盘辅助栏 - - - -
-

iOS 键盘辅助栏（贴合键盘）

-
- -
-
- - -
- - - -
- - - - diff --git a/js/jweixin-1.6.0.js b/js/jweixin-1.6.0.js new file mode 100644 index 0000000..5922790 --- /dev/null +++ b/js/jweixin-1.6.0.js @@ -0,0 +1 @@ +((e,n)=>{"function"==typeof define&&(define.amd||define.cmd)?define(function(){return n(e)}):n(e,!0)})(this,function(r,e){var a,c,n,i,t,o,s,d,l,u,p,f,m,g,h,S,y,I,v,_,w,T;if(!r.jWeixin)return a={config:"preVerifyJSAPI",onMenuShareTimeline:"menu:share:timeline",onMenuShareAppMessage:"menu:share:appmessage",onMenuShareQQ:"menu:share:qq",onMenuShareWeibo:"menu:share:weiboApp",onMenuShareQZone:"menu:share:QZone",previewImage:"imagePreview",getLocation:"geoLocation",openProductSpecificView:"openProductViewWithPid",addCard:"batchAddCard",openCard:"batchViewCard",chooseWXPay:"getBrandWCPayRequest",openEnterpriseRedPacket:"getRecevieBizHongBaoRequest",startSearchBeacons:"startMonitoringBeacons",stopSearchBeacons:"stopMonitoringBeacons",onSearchBeacons:"onBeaconsInRange",consumeAndShareCard:"consumedShareCard",openAddress:"editAddress"},c=(()=>{var e,n={};for(e in a)n[a[e]]=e;return n})(),i=(n=r.document).title,t=navigator.userAgent.toLowerCase(),f=navigator.platform.toLowerCase(),o=!(!f.match("mac")&&!f.match("win")),s=-1!=t.indexOf("wxdebugger"),d=-1!=t.indexOf("micromessenger"),l=-1!=t.indexOf("android"),u=-1!=t.indexOf("iphone")||-1!=t.indexOf("ipad"),p=(f=t.match(/micromessenger\/(\d+\.\d+\.\d+)/)||t.match(/micromessenger\/(\d+\.\d+)/))?f[1]:"",m={initStartTime:L(),initEndTime:0,preVerifyStartTime:0,preVerifyEndTime:0},g={version:1,appId:"",initTime:0,preVerifyTime:0,networkType:"",isPreVerifyOk:1,systemType:u?1:l?2:-1,clientVersion:p,url:encodeURIComponent(location.href)},h={},S={_completes:[]},y={state:0,data:{}},O(function(){m.initEndTime=L()}),I=!1,v=[],_={config:function(e){C("config",h=e);var o=!1!==h.check;O(function(){if(o)k(a.config,{verifyJsApiList:A(h.jsApiList),verifyOpenTagList:A(h.openTagList)},(S._complete=function(e){m.preVerifyEndTime=L(),y.state=1,y.data=e},S.success=function(e){g.isPreVerifyOk=0},S.fail=function(e){S._fail?S._fail(e):y.state=-1},(t=S._completes).push(function(){B()}),S.complete=function(e){for(var n=0,i=t.length;n{var n;if("string"==typeof e&&0{var i,t=c[e];return t&&(e=t),t="ok",n&&(i=n.indexOf(":"),"access denied"!=(t=(t=(t=-1!=(t=-1!=(t="failed"==(t="confirm"==(t=n.substring(i+1))?"ok":t)?"fail":t).indexOf("failed_")?t.substring(7):t).indexOf("fail_")?t.substring(5):t).replace(/_/g," ")).toLowerCase())&&"no permission to execute"!=t||(t="permission denied"),""==(t="config"==e&&"function not exist"==t?"ok":t))&&(t="fail"),n=e+":"+t})(e,t),n.errMsg=t),(i=i||{})._complete&&(i._complete(n),delete i._complete),t=n.errMsg||"",h.debug&&!i.isInnerInvoke&&alert(JSON.stringify(n)),t.indexOf(":"));switch(t.substring(e+1)){case"ok":i.success&&i.success(n);break;case"cancel":i.cancel&&i.cancel(n);break;default:i.fail&&i.fail(n)}i.complete&&i.complete(n)}function A(e){if(e){for(var n=0,i=e.length;n - - - - - H5 键盘辅助栏 - - - -
-

键盘辅助栏示例

- -
- -
- -
- -
-
- - -
- - - -
- - - -