saber酱的抱枕

哀哉京阿尼

06/11
16:39
其他

input获得和失去焦点时文字改变的jq代码

saber 撰写 单条回复 537次查看

这份代码是由一份jQuery代码改写的，用来控制输入框获得焦点和失去焦点时，处理里面的值。

function focusblur(element) {
	var defval = element.value; //针对input
	element.onfocus = function() {
		var thisval = element.value;
		if (thisval == defval) {
			element.value = "";
		}
	};
	element.onblur = function() {
		var thisval = element.value;
		if (thisval === "") {
			element.value = defval;
		}
	};
}
// 依次调用
var inputs = document.querySelectorAll("input[type=\"text\"]");
focusblur(inputs[0]);
focusblur(inputs[1]);

这个代码里没有加对文字颜色的设置，如果有需要的话可以再加。

input获得和失去焦点时文字改变的jq代码

01/2
08:00
学习

使用JotForm在线创建表单

saber 撰写 3条回复 1,007次查看

使用JotForm在线创建表单

创建表单一直是令我头疼的问题。对于复杂些的表单，使用可视化工具来制作明显更有效率。

JotForm就是一个在线创建表单的网站，使用拖拽操作，所见即所得。我们只需要免费创建一个账号，就可以使用JotForm来创建表单了。

JotForm不使用table标签做的布局，而是使用更加简洁的div、ul、li等标签，还会自动加上label。

设计界面如下：

使用JotForm在线创建表单

同时每个控件都可以点击右上角的齿轮图标进入进阶设置：

使用JotForm在线创建表单

进阶设置是很有用的，我们可以在进阶设置里设置输入框长度、预设文字、添加辅助说明、设置复选框列数等。

虽然在线设计的表单在布局上可能难以完美实现我们的需求，不过它帮我们完成了最繁琐的部分，我们接下来可以再按照自己的需求调整它，工作量仍然小了许多。
Read More →

使用JotForm在线创建表单

12/13
13:42
学习

使用autocomplete属性控制表单元素的自动完成

saber 撰写 无回复 435次查看

现代浏览器基本都带有自动完成功能，当我们在表单里提交过数据之后，浏览器会记住输入的内容。以后我们再次输入时，浏览器就会在下面给出提示，或者在输入框内根据输入的内容自动补全。

使用autocomplete控制浏览器的自动补全

在chrome中，输入框需要位于form中并且有name值，浏览器才会记住它的输入内容，如：

<form action="">
	<input type="text" name="a">
</form>

html5给表单元素增加了一个autocomplete属性，当此属性为off时，表示浏览器不会对该元素启用自动完成。

autocomplete属性适用于form元素，以及它里面的input：text, search, url, telephone, email, password, datepickers, range 以及 color。

使用autocomplete属性控制表单元素的自动完成

07/10
16:16
学习

向表单的select控件中添加选项

saber 撰写 无回复 393次查看

select控件就是下拉选择框，之前我没怎么试过对它进行js操作。今天看到有个add方法，可以向select控件里添加选项（option），记录一下。

var selectE=document.createElement("select");
selectE.id="selectE";
document.body.appendChild(selectE);

var optionE=document.createElement("option");
optionE.text="optionE";
selectE.add(optionE);

上例演示了创建一个select控件并像其中添加了一个选项。在需要使用JavaScript创建控件时很有用。

add语法：

selectObject.add(option,before)

option就是option元素，before是个数字，指示新选项插入在第几个选项之前。

向表单的select控件中添加选项

07/5
12:22
学习

input输入时对值和颜色的处理

saber 撰写 无回复 370次查看

input输入时对值和颜色的处理

input输入时对值和颜色的处理

在表单里添加input的预设值是常见的做法。当用户点击输入框之后，预设值消失，同时文字颜色也要加深，变成正常的颜色。如果用户清空了输入的内容，则恢复默认值。

以前我做这个效果用的代码比较繁琐，现在有更简单的方法。下面的js代码直接写在input标签里就可以了。

onfocus="if(this.value==this.defaultValue){this.value='';this.style.color='#333'};" onblur="if(this.value==''){this.value=this.defaultValue;this.style.color='#aaa'}"

这里面有个defaultValue，这个属性是浏览器自动保存的，我们可以直接拿来用。以前我都是把默认值用js保存到一个变量里的，那样就麻烦了。

input输入时对值和颜色的处理

05/25
17:48
学习

chrome对日期表单的支持

saber 撰写 2条回复 581次查看

最近发现的，如果把表单input控件的type设置为date，chrome就会自动应用选择日期功能了。

<input type="date" name="">

首先输入框上会显示“年/月/日”的字样。

chrome对日期表单的支持 date input

你可以点击这三项中的任意一个输入数字。

鼠标放上input之后，最右侧会显示一些操作按钮。点击最右侧的三角形，就会打开一个日期选择面板：

chrome对日期表单的支持 date input

点击即可把选择的日期输进去。

chrome对日期表单的支持 date input

这样在chrome上大部分时候都可以对各种日期输入插件说拜拜啦~来，跟我念：

谷人希谷人希谷人希谷人希谷人希谷人希谷人希谷人希谷人希谷人希谷人希谷人希……

试一试：

chrome对日期表单的支持

01/16
11:26
学习

php验证表单和保留表单值

saber 撰写 无回复 195次查看

看了看php，写了个简单的表单验证和保留表单值的demo。页面中单选框和下拉框的选中用js来做了，避免了在php中每个选项都要写语句判断的“不优雅”的情况。

在前台无法查看到php的源代码，比起js，这点让我很有安全感。但是php对前台页面的处理能力比较弱，这时候最好还是用js。

php验证表单和保留表单值

09/5
08:00
学习

修改表单中file控件的外观

saber 撰写 3条回复 1,044次查看

表单中的file上传控件在各个浏览器中的外观都不太一样，所以我们可以自己做一个外观。原理是隐藏file控件，然后自己做出文件名的显示区域，以及选择按钮。 

<form id="form0">
	<input type="file" id="fileinput1">
	<span id="showfile">尚未选择文件</span>
	<span title="选择文件" id="selectbtn1">选择文件</span>
	<span class="tip">图片必须为jpg格式，体积小于2M，文件名不能包含“sox”三个字</span>
</form>
<style>
	#fileinput1{display: none;}
	#form0 span{border-radius: 5px;font-family: '微软雅黑';display: inline-block;}
	#showfile{width: 300px;height: 34px;line-height: 34px;color: #aaa;padding:0 5px 0 10px;border:1px solid #0c0;white-space:nowrap;  text-overflow:ellipsis;overflow: hidden;vertical-align:top;}
	#selectbtn1{width: 100px;height: 36px;line-height: 36px;background:#4DB849;color: #fff;text-align: center;cursor: pointer;vertical-align:top;}
	.tip{margin-left: 5px;color: #aaa;height: 36px;line-height: 44px;}
</style>
<script>
	document.getElementById("selectbtn1").onclick=function  () {
		document.getElementById("fileinput1").click();
	}
	document.getElementById("fileinput1").onchange=function(){
		if (this.files[0].type!="image/jpeg") {
			alert("文件格式不正确！");
			return false;
		}else if(this.files[0].size>2000000){
			alert("文件体积过大！");
			return false;
		}else if (this.files[0].name.toLowerCase().indexOf("sox")>-1) {
			alert("文件名包含非法字符！");
			return false;
		};
		document.getElementById("showfile").innerHTML=this.files[0].name;//这里没有用value，因为获取不到真实的绝对路径的，不如只显示文件名
		document.getElementById("showfile").style.color="#333";
	}
</script>

点击选择文件按钮的时候用js去触发file控件;在选取文件之后，将文件信息显示到文件名区域里。

你可能会注意到files[]这个集合： 

this.files[0]

这是html5中为file控件增加的属性，通用的有name、size、type、lastModified这几个属性。这些属性可以用来对上传的文件做一些检测。

注意，size的单位是Byte（字节）。

修改表单中file控件的外观

07/30
17:46
学习

html中的fieldset和legend标签

saber 撰写 无回复 452次查看
调查表单

吾王的名字：

咖喱棒又称：


答案

阿尔托利亚·潘德拉贡
石中剑

fieldset和legend标签的主要表现是把一些内容组织在一起，加上边框和标题。重点是这个边框，这两个标签让这种边框上加文字的实现变得简单了。

使用时首先把需要放在一起的内容放在fieldset标签里，然后用legend标签起一个标题。

这两个标签不仅可以使用在form表单中，用于组织文本，或给图标区域加个标题都可以。

各大主流浏览器都支持此标签，样式也比较一致。更改一下默认样式会更美观一些。

html中的fieldset和legend标签

08/18
15:55
学习

input获得和失去焦点时文字改变的jq代码

saber 撰写 无回复 506次查看

input jq jQuery js value 焦点 表单

input失去焦点和获得焦点jquery焦点事件插件，鼠标在搜索框中点击的时候里面的预设文字就消失了，在别的地方点击的话预设文字又出现了。

input需要设置id，然后在头部先引入jq，之后添加下面的js代码 

//设置表单的预设value切换
jQuery.focusblur = function(focusid) {
    var focusblurid = $(focusid);
    var defval = focusblurid.val();//针对input
    var deftext = focusblurid.html();//针对textarea
    focusblurid.focus(function(){
        var thisval = $(this).val();
        if(thisval==defval){
            $(this).val("");
            $(this).html("");
            $(this).css("color","#333");
        }
    });
    focusblurid.blur(function(){
        var thisval = $(this).val();
        if(thisval==""){
            $(this).val(defval);
            $(this).html(deftext);
            $(this).css("color","#aaa");
        }
    });
};
//注册 一个一个写
$.focusblur("#yy_name");
$.focusblur("#yy_tel");

两段color设置是我后来加的，第一个是点击之后，如果文字改变得和预设文字不同了，则把文字颜色加深，第二个则是失去焦点时如果没有任何文字了，则把文字重设为预设文字，颜色重设为指定的颜色。这样就ok了~

修改版： 

    jQuery.focusblur = function(element,defcolor,truecolor) {
        var focusblurid = element;
        var defval = focusblurid.val();//针对input
        focusblurid.focus(function(){
            var thisval = $(this).val();
            if(thisval==defval){
                $(this).val("");
                $(this).css("color",truecolor);
            }
        });
        focusblurid.blur(function(){
            var thisval = $(this).val();
            if(thisval==""){
                $(this).val(defval);
                $(this).css("color",defcolor);
            }
        });
    };
    $.focusblur($(".jbdh").eq(0),"#b7b7b7","#444");

这个里面没有加html，需要的话再加吧

input获得和失去焦点时文字改变的jq代码