澶у濂斤紝鎴戞槸鍗婂馃懘锛屼竴涓垰寮€濮嬪啓浣滅殑娌欓洉绋嬪簭鍛樸€傚鏋滃枩娆㈡垜鐨勬枃绔狅紝鍙互鍏虫敞鉃曠偣璧烉煈嶅姞鎴戝井淇★細frontendpicker锛屼竴璧峰涔犲拰鍓嶇浜ゆ祦锛屾垚涓烘洿濂界殑宸ョ▼甯垀鍏虫敞鍏紬鍙凤細浠庝簨鍓嶇鐨勫崐澶忥紝浜嗚В鏇村鍓嶇鐭ヨ瘑锛佺偣鎴戞帰绱㈡柊涓栫晫锛佸師鏂囬摼鎺?=>http://sylblog.xin/archives/100鍓嶈█鎵撳紑鎴戜互鍓嶆暡鐨勪唬鐮侊紝杩欒姝荤殑浠ｇ爜娌℃湁鐏甸瓊锛屾瘡涓姛鑳介兘鍐欐浜嗏€滃鍒剁矘璐粹€濆洓涓瓧銆傚弽姝ｇ潯涓嶇潃锛屼粩缁嗙湅浜嗗崐澶滐紝瀛楅噷琛岄棿锛岀珶鐒剁湅鍒颁簡婊″睆閮芥槸鈥滆彍鐙椻€濅袱涓瓧锛侊紒锛佲€斺€旈瞾杩咃紙鍋囷級浣滀负涓€涓狢V鏂瑰悜鐨凜SS+JS绋嬪簭鍛橈紝鎴戞渶甯稿仛鐨勫氨鏄祴鍊煎拰绮樿创锛屼箣鍓嶄篃瀛﹁繃涓€鐐广€傛病鏈夌郴缁熺殑瀛︿範銆侰SS涓叧浜庢枃鏈€夋嫨鐨勫睘鎬уぇ鑷存湁涓や釜锛?:selection鍜寀ser-select::selection::selection鐢ㄤ簬寮鸿皟鐢ㄦ埛閫氳繃鍗曞嚮鎴栨嫋鍔ㄩ紶鏍囬€夋嫨鐨勫唴瀹广€傜敤娉曞緢绠€鍗曪細p::selection{color:rgba(255,255,0,1);background-color:rgba(128,128,192,1);}鐩墠::selection鍙敮鎸佷互涓嬪睘鎬э細colorbackground-colortext-decoration鍙婂叾鐩稿叧灞炴€ext-shadowstroke-color,fill-color鍜宻troke-width鏀寔灞炴€?浣嗘垜浠彲浠ヤ娇鐢ㄨ繖浜涘睘鎬ф潵鍒朵綔涓€浜涙湁瓒ｇ殑閫夋嫨鏁堟灉銆侲xample-selectedemphasis涓昏鏄埄鐢╰ext-shadow缁欐枃瀛楁坊鍔犻槾褰憋紝褰撴枃瀛楄閫変腑鏃讹紝浼氭樉绀烘晥鏋溿€俻::selection{棰滆壊锛歳gba(255,255,0,1);鑳屾櫙鑹诧細rgba(128,128,192,1);鏂囧瓧闃村奖锛?1px-1px0#000,1px-1px0#000,-1px1px0#000,1px1px0#000;}PS锛氭洿澶歵ext-shadow鍒朵綔鐨勬枃瀛楁晥鏋滃彲浠ユ煡鐪嬶細https://juejin.cn/post/702895...user-selectuser-select涓昏鏄帶鍒剁敤鎴风殑閫夋嫨锛屾瘮濡傛枃瀛楃姝紝鍋忛€夌瓑锛佷富瑕佸睘鎬у€兼湁锛歯one,auto,text,contain,all鍏蜂綋鐢ㄦ硶鍙互鏌ョ湅锛歨ttps://juejin.cn/post/702293...閬囧埌pointer-events:none;褰撳厓绱犺缃畃ointer-events:none鏃讹紝浼氬鑷村厓绱犳案杩滀笉浼氭垚涓洪紶鏍囦簨浠剁殑鐩爣銆備竴寮€濮嬫垜涔熸兂杩囷紝鍗充娇鍏冪礌璁剧疆鍏冪礌user-select涓哄彲閫夛紝鍙pointer-events:none;鏈€鍚庤繕鏄€変笉鍑烘潵銆備絾鏄粨鏋滄伆鎭扮浉鍙嶏細鍦ㄤ笅闈㈢殑浠ｇ爜涓紝鎵€鏈夌殑鍏冪礌閮藉彲浠ヨ閫変腑锛屼絾鏄痯ointer-events:none;銆傚疄楠岀殑鏈€缁堢粨鏋滄槸鍙互閫夋嫨鏂囨湰銆俻::selection{鎸囬拡浜嬩欢锛氭棤锛泆ser-select:all;}鍏冪礌姘歌繙涓嶄細鎴愪负榧犳爣浜嬩欢鐨勭洰鏍囥€備絾鏄紝褰撻紶鏍囦簨浠剁殑pointer-events灞炴€ф寚瀹氬叾浠栧€兼椂锛岄紶鏍囦簨浠跺彲浠ュ畾鍚戝埌瀛愬厓绱狅紝鍦ㄨ繖绉嶆儏鍐典笅锛岄紶鏍囦簨浠跺皢鍦ㄦ崟鑾锋垨鍐掓场闃舵瑙﹀彂鐖跺厓绱犵殑浜嬩欢渚﹀惉鍣ㄣ€侸S瀹炴椂缁熻闀垮害js浣跨敤.addEventListener("selectionchange")鐩戝惉鏂囨湰閫変腑浜嬩欢銆倃indow.getSelection().toString()鐢ㄤ簬鑾峰彇閫変腑鐨勬枃鏈€侳orexample,inthefollowingexample,whentextisselected,thelengthoftheselectedtextcanbedisplayedinrealtime.
