html纵向文本框,HTML5区域范围文本框 >> 张鑫旭-鑫空间-鑫生活

CSS代码：

input { font-size: 14px; font-weight: bold; }

input[type=range]:before { content: attr(min); padding-right: 5px; }

input[type=range]:after { content: attr(max); padding-left: 5px;}

output {

display: block;

font-size: 5.5em;

font-weight: bold;

}

HTML代码：

音量控制

JS代码：

(function() {

var f = document.forms[0],

range = f['range'],

result = f['result'],

cachedRangeValue = localStorage.rangeValue ? localStorage.rangeValue : 5;

// 检测浏览器是否是足够酷

// 识别range input.

var o = document.createElement('input');

o.type = 'range';

if ( o.type === 'text' ) alert('不好意思，你的浏览器还不够酷，试试最新的Opera浏览器吧。');

// 设置初始值

// 无论是否本地存储了，都设置值为5

range.value = cachedRangeValue;

result.value = cachedRangeValue;

// 当用户选择了个值，更新本地存储

range.addEventListener("mouseup", function() {

alert("你选择的值是：" + range.value + ". 我现在正在用本地存储保存此值。在现代浏览器上刷新并检测。");

localStorage ? (localStorage.rangeValue = range.value) : alert("数据保存到了数据库或是其他什么地方。");

}, false);

// 滑动时显示选择的值

range.addEventListener("change", function() {

result.value = range.value;

}, false);

})();