default
menu home
Icon library Sign up Login favorite_border message help_outline

- Online notes-javascript-page1

styleTags:  All CSS html javascript php/other IT
Demo subject javascript捕获缺省的组合快捷键,比如CTRL+F

有时候我们需要在网页上捕获用户的按键动作,然后避免执行缺省动作,替换成我们想要执行的程序。

下面我们以拦截并接管“ctrl+f”组合键为例,代码如下:

by: fanshome  visibility 1632
2023-06-09 06:22 (UTC)

subject 关于网页上的复选框checkbox的checked和value的问题

这个问题相信很多像我一样的非专业开发者遇到过,就是感觉checkbox是一个神奇的存在,为什么这么说?就是在开发网页过程中,有时候使用checkbox一切顺利,提交表单的时候用JavaScript检查它的checked或value的状态或取值都一切正常;但是又有些时候,无论在JavaScript中怎么折腾,感觉这个checkbox一点儿不听话,明明已经选中了,checked的状态始终不变,真是头疼。

当然,上网学习过,MDN的标准答案是:

如果一个复选框在其表单被提交时没有被选中,就不会有任何代表其未被选中的状态(例如 value=unchecked)的值被提交给服务器——该值根本就没有被提交给服务器!如果你想在复选框未被选中时提交一个默认值,你可以在表单中加入一个具有相同的 name 和 value 的 <input type="hidden"> 字段,它可以由 JavaScript 生成。

checked:
一个布尔属性,表示该复选框是否被默认选中(当页面加载时)。它不表示这个复选框当前是否被选中:如果复选框的状态被改变,这个内容属性不反映这个变化。此时,只有 HTMLInputElement 的 IDL 属性 checked 会更新。

怎么样?是不是好像弄懂了一点东西,但是好像又不是特别明白的样子。假如一个复选框的状态被改变,checked属性不反映这个变化!这时什么意思?如果不变化,那么为什么有些页面它表现又那么正常呢?

经过认真学习思考,我终于得到了我自己的结论,可以翻译成大白话,是个程序员都能明白:

就是复选框在form表单中提交的时候,它会很正常!!!划重点,在“表单中提交时”,一个字也不能少!!!其实MDN的解释里有说,只是没有太过强调罢了。再翻译一下,先假设有这么个场景:

如果为了方便用户,比如在用户设置某些选项时,希望把复选框当成一个开关来用,选中表示“开”,不选中表示“关”,直接根据复选框状态后台就更新数据库里的状态,而不需要用户有提交表单的动作。假如你此时 没.有. 在页面中制作一个表单,只是 单.独. 一个复选框,然后希望用JavaScript来处理后续,那么你就惨了,你会发现无论你怎么折腾,貌似都不能得到当前复选框的“checked”状态,挠头吧?!

其实,这是对的,因为复选框本来就是这个德行,没有表单的提交动作,checked状态是不会跟着用户的鼠标点击勾选而变化的,你只是在页面上看到了框里多了一个勾或变成了一个空的框框,就只是“看到”而已。

那么,假如想在页面上实现前述功能,想让复选框像个开关一样直接起作用的话怎么做?

答案也很简单,如果不想麻烦而使用表单来实现,就扔掉checkbox,换言之就可以只是把checkbox当一个摆设,只是给用户的眼睛看状态,就好了呀!真正用JavaScript处理的东西可以是和checkbox一点关系都没有的,比如我们可以在JS里设一个变量来记录,或者给页面上某个dom元素添加一个属性来记录我们需要的状态,比如:<div id='switch' status='0'></div>,用户点一下checkbox,我们就把“status”值在“0“和”1“之间做个变化,不要去读checked是true or false,直接读写switch元素的status属性值就好。

好吧,也许我的理解并不完全正确,但是以我目前的三脚猫水平而言,事实好像就是如此。

by: fanshome  visibility 2437
2023-06-03 16:45 (UTC)

Demo subject 自用小工具:正则表达式测试是否能匹配字符串

正则表达式写起来不难,但是要做到准确无误却是一个不小的挑战,经常因为一个小疏忽,导致貌似正常而实际上却有bug。

尤其是域名或url相关的,特别容易出错,出错的主要原因是没有考虑到实际情况下的url参数中可能也包含域名。

所以自己做一个小工具,用来测试和检测写的正则表达式是否准确有效。

by: fanshome  visibility 2289
2023-05-29 14:54 (UTC)

Demo subject CSS3+SVG实现的带音效、会抖动的小铃铛图标特效

非常真实的抖动效果,鼠标移上去还有叮当声哦...

点“演示”按钮体验一下。

by: fanshome  visibility 2875
2023-05-25 08:52 (UTC)

subject php/javascript的一些关于时间处理的函数

记录一些经常用到的时间处理函数以备用。

by: fanshome  visibility 1962
2023-06-02 14:05 (UTC)

subject 更全面匹配UTF-8中文汉字的正则表达式

网上搜索得到的匹配汉字的正则表达式有一部分并不全面,只匹配了Unicode字符集中\u4E00-\u9FA5范围,并不包含\uF900-\uFA2D这些后期添加的拾遗补缺的、生冷僻的中文字符。而有时候我们需要能比较全面的匹配所有中文字符,则需要在常用的正则表达式上做一些修改补充。

要注意的是,JavaScript和PHP在匹配Unicode字符时,它们的正则表达方式并不一致,不能直接复制过去使用。
php正则记得要添加“/u”修正符。

by: fanshome  visibility 1958
2023-05-19 07:57 (UTC)

Demo subject https协议下javascript复制内容到剪贴板

JavaScript复制内容到剪贴板(clipboard)网上教程比较多,大部分使用document.execCommand('copy');的方法。不过,该方法不久将不再被现代浏览器支持,所以需要一个更符合时代的方法。
其实,使用navigator.clipboard方法也很简单,并且一时半会儿不会被淘汰。使用该方法复制文本内容的示例代码如下:

by: fanshome  visibility 1726
2023-05-19 16:53 (UTC)