标签: web

  • 前端膜法:用CSS去除Chrome表单自动填充时的淡黄色背景

    前端膜法:用CSS去除Chrome表单自动填充时的淡黄色背景

    时效性提醒:本文首次编写发布于9 年前。

    用过Chrome的人都知道,如果你在提交表单(如登录)时,选择了记住用户名和密码,那么下次登录时,保存的用户名和密码会自动填充,并且相应<input>标签的背景也会被强制设为淡黄色。

    对于默认样式的输入框而言,加上淡黄色的背景并不会显得很违和。但如果你用了CSS让它变得漂亮些,那么这个强制添加的淡黄色背景很可能会毁掉你那精心调校的样式。

    如果你遇到了这种情况,那么你一定会想着如何去把这个丑陋的淡黄色背景去掉,但不幸的是,这个由浏览器强加的样式,优先级是最高的,你根本无法覆盖掉它。

    所以我们只能通过一些CSS hack的方式曲线救国,来“去除”这个讨厌的东西。

    input:-webkit-autofill {
        -webkit-box-shadow: 0 0 0px 1000px #000000 inset;
    }

    这段CSS代码把所有被自动填充表单所涂上淡黄色的<input>标签,设置了一个巨大的白色内向box-shadow,已达到覆盖掉淡黄色背景的目的,适用于<input>原本是纯色背景的情况。

    而对于最开始图中的情况,<input>标签原本是透明背景,这样才能把后面高斯模糊的背景图透出来,所以上面“覆盖”的方法并不可行,我们需要让背景都“消失”,于是便有了下面这种更加曲线救国的方式。

    :-webkit-autofill {
        -webkit-text-fill-color: #fff !important;
        transition: background-color 5000000s ease-in-out 0s;
    }

    首先第一行先重新设置了原本的字体颜色,从CSS上来讲-webkit-text-fill-color刚好可以覆盖掉color

    而重点在第二行,我们通过transition给那个淡黄色的背景加了个长达5000000秒的淡出效果,于是乎,这个淡黄色的背景就这样被巧妙的“隐藏”了起来,除非浏览者愿意盯着它看好几个小时,那淡黄色的背景才会略微显现出来一点点。

    CSS的属性众多而有很多又互相干涉,相信对很多初学者留下了越改越乱,不停拆东墙补西墙的印象,但正是因为这样,才会出现各种有趣的CSS hack。

    Web开发和打FPS一样,是一个下限很低而上限很高的东西,而Web也是在快速的发展着,只有不断接触新的知识,才能不落后于时代。

  • 用Jquery让textarea支持自动缩进

    时效性提醒:本文首次编写发布于11 年前。

    这个代码的作用是让textarea也能输入tab,并可以像代码编辑器一样能自动缩进。

    废话不多说了,直接上Demo:

    https://codepen.io/Wu23333/pen/MWwYmmK

    var textarea_id = "text";
     (function($, undefined) {
             $.fn.getCursorPosition = function() {
             var el = $(this).get(0);
             var pos = 0;
             if ('selectionStart' in el) {
                 pos = el.selectionStart;
             }else
                 if ('selection' in document) {
                     el.focus();
                     var Sel = document.selection.createRange();
                     var SelLength = document.selection.createRange().text.length;
                     Sel.moveStart('character', -el.value.length);
                     pos = Sel.text.length - SelLength;
                 }
             return pos;
         }
     })(jQuery);
     $(document).keydown(function(e){
         text=document.getElementById(textarea_id);
         if(e.which == 9){
             var cursor_pos = $(text).getCursorPosition();
             $(text).val($(text).val().slice(0,cursor_pos) + '\t' + $(text).val().slice(cursor_pos));
             text.focus();
             text.setSelectionRange(cursor_pos+1, cursor_pos+1);
             return false;
         }
         if(e.which == 13){
             var cursor_pos = $(text).getCursorPosition();
             var notelines = $(text).val().slice(0,cursor_pos).split('\n');
             var listline = notelines[notelines.length-1];
             var n = 0;
             while(listline[n] == '\t'){
                 n+=1;
             }
             $(text).val($(text).val().slice(0, cursor_pos)+'\n'+$(text).val().slice(cursor_pos));
             for (i=n; i>0; i--){
                 $(text).val($(text).val().slice(0, cursor_pos+1)+'\t'+$(text).val().slice(cursor_pos+1));
             }
             text.focus();
             text.setSelectionRange(cursor_pos + n+1, cursor_pos + n+1);
             return false;
         }
     });
  • Codiad 的中文翻译

    时效性提醒:本文首次编写发布于12 年前。

    Codiad以前已经介绍过了,是一个在线编辑你的网站的好工具,但没有中文,所以我写了个Codiad的中文翻译.
    效果图:

    PS:此中文翻译已被Codiad官方采纳,现在到Codiad官网就可以下载含有此中文翻译的Codiad.
    (更多…)

  • HTML在线测试工具,欢迎使用

    时效性提醒:本文首次编写发布于12 年前。

    刚写的,功能还算不错.

    地址:wusiyu.tk/html

    PS:此工具已开源,下载地址:GIT@OSC

    PPS:这个站的主题是我写的,也已开源,地址:GIT@OSC ,注意test分支才是最新的,和这个站的一样,回头把注释什么的补全再并合到主分支.

  • 修改phpMyAdmin的默认访问路径

    时效性提醒:本文首次编写发布于12 年前。

    phpMyAdmin是一个方便管理Mysql的软件,默认以http://youdomain.com/phpmyadmin来访问,不过这样以来谁都可以访问你的phpmyadmin,如果你的密码被别人知道了,那他就可以登陆phpmyadmin来修改你的数据库,这简直是一场灾难!

    所以,我们要修改一下phpMyAdmin的默认访问路径,这样别人就不知道怎么访问你的phpmyadmin了.

    我们只需要修改一下webserver的phpmyadmin配置文件就可以了,我们以apache为例,其他的都类似.

    debian系的linux发行版中配置文件在/etc/apache2/conf-enabled/phpmyadmin.conf

    redhat系的linux发行版中配置文件在/etc/httpd/conf.d/phpMyAdmin.conf

    配置文件中有这么一行:

    Alias /phpmyadmin /usr/share/phpmyadmin
    

    明白了吧,phpMyAdmin的文件实际在/usr/share/phpmyadmin里,这里只是一个别名,修改它就可以修改phpMyAdmin的默认访问路径了.

    例如修改为

    Alias /mysqladmin /usr/share/phpmyadmin
    

    就可以用http://youdomain.com/mysqladmin来访问phpmyadmin.

  • Debian下Apache的配置文件

    时效性提醒:本文首次编写发布于12 年前。

    Linux的一个特点就是发行版多,不同的发行版造就了一些不同,比如悲催的Apache…

    在Red hat系下,Apache被叫做httpd; 而在debian系中,Apache就叫apache.

    debian下apache的配置文件在/etc/apache2/中,是由多个配置文件组成的一个目录,结构主要如下:

    #       /etc/apache2/
    #       |-- apache2.conf
    #       |       `--  ports.conf
    #       |-- mods-enabled
    #       |       |-- *.load
    #       |       `-- *.conf
    #       |-- conf-enabled
    #       |       `-- *.conf
    #       `-- sites-enabled
    #               `-- *.conf
    

    也就是说,这些文件共同组成了apache的配置.

  • 恶搞: 浏览器防假死测试

    时效性提醒:本文首次编写发布于12 年前。

    你的浏览器死掉了不要怪我。。。