表单中readonly的input等标签,禁止光标进入(focus)的几种方式

在做移动端页面,表单内的部分元素如果设置了readonly=”readonly”,CHROME模拟移动端是看不出问题的。而手机上虽然表单元素不能编辑内容,但是会出现闪动的光标以及页面底部有一条系统自带的控制bar。这样的体验很差,于是我总结了几个方案。

在做移动端页面,需要在订单页面中显示表单数据,由于UI统一,所以就依旧采用form的结构来写结构,只读数据的标签自然要加readonly=”readonly”,以为这样就行了,CHROME模拟移动端是看不出问题的。手机上一看,虽然表单元素不能编辑内容,但是会出现闪动的光标以及页面底部有一条系统自带的控制bar。

表单readonly元素依然有光标
表单readonly元素依然有光标,底部还有BAR,感觉不好

这种情况对我来说并不好。于是网上找了一些解决方案,现在总结一下:

方案一(JS):

<input type="text" value="test" onfocus="this.blur()" readonly="readonly">

这个很好理解就是进入的时候自动跳出。但是缺点是一方面js处理没有css好,二是如果需要在该元素上绑定其他事件,其他人开发不留意可能会造成事件覆盖。

方案二(CSS):

[readonly="readonly"] {
  user-select: none;
}

这是个新的实验性属性,具体说明及兼容性可参考user-select MDN
用起来感觉很好,但是同样有两个问题:一,非标准属性(请尽量不要在生产环境中使用它!);二,如果用户想要复制该表单内容就不行了,这个问题个人感觉很严重!

方案三(CSS):

[readonly="readonly"] {
  pointer-events: none;
}

这个是我感觉比较适合我的,因此最后我采纳了该方案,当然也是有弊端的,绑定在只读表单元素的所有事件将无法生效。除此之外都表现完美,就我目前需求来看,也不需要什么事件。因此采用了~

当然,如果你也遇到相似的问题,可以根据情况选择对应的方案,当然,如果你也有更好的方法也欢迎留言~

wordpress评论区域下方添加表情图标方法

最近研究淘宝网店,顺便自己开了个做测试,没想到拉了个小客户,虽然交易价很便宜只有一元钱,并且花了一会就解决了他的问题.

随后他又遇到了一些问题想我询问,不过我以学习研究的态度帮助了他,这也就是今天要说的内容,何如给wordpress模板的评论区域快添加一排表情.先来看看效果图…

表情图片位于评论区内的效果
表情图片位于评论区内的效果

看后大家觉得这个很简单的,其实说简单也简单说有点麻烦也的确有点麻烦.首先我要说的是,调用系统默认的表情是需要在适当的位置添加下面一行代码:

<?php if ( function_exists(cs_print_smilies) ) {cs_print_smilies();} ?>

然而究竟是在哪里添加这段代码呢,我们继续分析研究…

可能回事修改主题的comments.php模板文件,但是当你找到评论区表单部分的时候,你发现居然只有短短的一句话:

<?php comment_form(); ?>

于是这个要么就出现在了整个评论表单区域的前面要么出现在了最底部,这并不美观,更不是我们想要的.所以修改comments.php是做不到的…那么就需要研究一下comment_form();这个函数了,可能是我比较笨,我首先想到的依然是主题目录下的functions.php文件里面修改,恰巧我也找到了,不过略不相同,抱着试试的态度,搜索到了comment_form_default_fields,具体完整代码如下:

add_filter('comment_form_default_fields','MxS_fields');
/** -----------------------------------------------
	 * custom comments
*/ 
if ( ! function_exists('MxS_custom_comments')) {
function MxS_custom_comments($comment, $args, $depth) {
$GLOBALS['comment'] = $comment;
?>
<li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
<div id="comment-<?php comment_ID(); ?>">
<div class="message_head">
<span class="avatarx"><?php echo get_avatar($comment,$size='40',$default='' ); ?></span>
<span class="name"><?php comment_author_link() ?></span> <?php edit_comment_link( __( '(Edit)', 'mxs_theme' ), ' ' ); ?>
<span class="reply"><?php comment_reply_link( array_merge( $args, array( 'depth' => $depth, 'max_depth' => get_option('thread_comments_depth') ) ) ); ?></span>
</div>
<span class="date"><?php comment_date('y/m/d') ?></span>
<div class="clear"></div>
<div class="cmt_text"><?php comment_text(); ?></div>
</div><!-- #comment-##  -->	
<?php }}

当然这个函数之前的语句是与这个函数没有什么关系的.看这个函数,写的是已评论的表单结构.貌似也不对,其中有一句$GLOBALS[‘comment’] = $comment;目测好像是调用系统全局评论变量,具体是啥意思,我这PHP外行也不大明白…改来改去还是没该成功,于是想到会不会是跟系统函数模块有关.于是继续查找…找到了wp-includes/comment_template.php打开一看,仍然搜索comment_form,在1510行,找到了好长一段…耐心读下去..一直看到<?php if ( comments_open() ) : ?>字面上意思是,如果评论功能开启,则执行以下语句,接着看,就发现跟表单相关了.找到

<?php echo $args['comment_notes_after']; ?>
<p class="form-submit">
  <input name="submit" type="submit" id="<?php echo esc_attr( $args['id_submit'] ); ?>" value="<?php echo esc_attr( $args['label_submit'] ); ?>" />
  <?php comment_id_fields( $post_id ); ?>
</p>

其实也就看出来了,我不正是要在submit之前添加表情么?果断在form-submit前面加一行之前提到的表情调用代码,修改如下:

<?php echo $args['comment_notes_after']; ?>
<?php if ( function_exists(cs_print_smilies) ) {cs_print_smilies();} ?>
<p class="form-submit">
  <input name="submit" type="submit" id="<?php echo esc_attr( $args['id_submit'] ); ?>" value="<?php echo esc_attr( $args['label_submit'] ); ?>" />
  <?php comment_id_fields( $post_id ); ?>
</p>

保存,接着刷新一下文章内容页看到评论区域就有了表情了.至此关于wp评论区域调用系统自带的表情图标功能就实现了.是不是很简单啊 😀

PS: 似乎这个方法在现在的3.8.2修改无效了.如果不行就直接装个Custom Smilies插件吧~(2014年4月9日)

正则表达式学习总结(表单验证)

前一阵子,每天忙着做公司的电子商务网站的前台,对我来说也是一个很大的挑战,由于某些原因程序员离职,最后公司找了一个兼职程序员,这可苦了我~一向做前台只管设计图纸和HTML的我需要自己弄js了,也怪我不争气,早就说了把js掌握,可是到现在都没搞好,还是个看得懂却写不出的水平.

这次电子商务网站首先从用户注册开始写起,之前做过博客制作项目,不过当时是公司程序员做了很多js,那时我也就万事大吉了~现在看到注册页面,首先表单不熟悉的我就是悲剧,这个要动态验证用户注册时填写的是否正确可是让我忙碌了许多天,也头疼了许多天,当然在此先感谢前几天热心帮助我的大师丁同志.于是乎,今天也是闲着,细致了看了关于正则表达式的基本用法,受益匪浅,学习过程中像小熊同志(最近研究PHP)问了下,也给我带来了不少帮助,不过他说PHP的正则表达式跟这个我看的js有区别,这下我又晕了,不管,总之大同小异. 其实本来表单验证的正则表达式网上是有很多的,但是不够灵活,不具复制性,下面,我将以我自己学习的结果举几个例子.

  1. 验证手机号码(大陆): 我是这样写的: ^(\(\+86\)?)|(\+86)?(13[0-9]|15[0|3|6|7|8|9]|18[8|9])\d{8}$ 首先在input内的文本输入框有个默认的value=”(+86)”或者没有都不影响最终验证,并且,它能够验证当前国内的手机号码是否符合,当然同样国际手机号码的格式可以这样写 \+/d{2,4}/d{8,11} 这里需要说明的是,它分为两个部分,第一部分\+/d{2,4}为国家区号长度为最小长度2,最大长度4,后面同理号码最小长度6,最大长度11.
  2. 验证网站地址: 网上大多比较简陋,比如: [a-zA-z]+://[^/s]* ,这个明显存在很大问题,如果用户输入 what://baidu 他是可以通过验证的,有谁见过这样的网址?当然准确的说,http://可写可不写,因为ftp://和https://一般不是默认域名.我则是这样处理的,input文本输入框默认值value=”http://”,而表达式是我是这样写的: ^(http\:\/\/)?([a-zA-Z]{0,63}\.)?[-a-zA-Z0-9]{0,63}\.[a-zA-Z]{2,3}$ 这个对于whidy.net,www.whidy.net,http://whidy.net,http://www.whidy.net都是OK的,对于网站域名最大长度保守的来说我就设定为最大63,我想没有谁会申请这么长的域名了: ),,,而对于网址的结尾,则做了最小长度为2,最大长度为3的限制,域名一般没有长度为1或者大于3的.那么这样相对来说就很严格,用户哪里有输入错误,可以方便的检测出来~

看了这两个例子之后,大家可以尝试在其他表单验证,根据自己需求来写.对于正则表达式的熟练使用还是相当重要的! 最后,我分享几个有关资源,大家可以用来学习测试(一下资源均来自互联网,仅供学习参考使用,不可用于商业用途.嘻嘻~)

  1. 正则表达式系统教程
  2. 正则表达式验证小工具:RegexTester.exe 简要说明:在Regex输入框内输入规则后,在Resource内输入你要验证的内容,最后按F5,查看Matches框内的验证结果~示例如图:

    Regex Tester
    Regex Tester
  3. 一个别人写的,不错,当然看到后面也比较费力,大家有兴趣也可以看看 http://deerchao.net/tutorials/regex/regex.htm