html5可滑动的文本框,html5 input type="range"实现拖拉滑条功能

本文是最新的html5技术 实现拖拉条功能。实现如下图所示效果

主要功能实现是在拖拉滑动条后，在后台处理textbox中相应的值。但是有的浏览器在拖动滑动条是，textbox里面的值一直变化，会频繁触发textchanged事件(注意jquery 在客户端给textbox赋值是并不会引起回发，即不会触发textchanged事件，需使用jquery 条用change()事件，以引起回发。)

下面贴出代码。

$(document).ready(function () {

sliderRange();

addEndRequestHandle();

});

function sliderRange() {

var trackBar = document.getElementsByClassName("rangeColor");

for (i = 0 ; i < trackBar.length; ++i) {

var traB = trackBar[i];

$(traB).mouseup(function () {

var tbid = this.id.split('_')[0];

$("#" + tbid).change();

});         //该函数功能是为了textbox内容改变的情况下，且mouseUP时，引起回发 触发textbox的textchanged事件。

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

var tbid = this.id.split('_')[0];

$("#" + tbid).val(this.value);

}, false);//该函数功能是在拖拉滑动条时，在textbox动态更新滑动条的值。

}

}

function addEndRequestHandle() {

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(sliderRange); //此处是为了ajax异步刷新，js失效做的处理，使其每次异步回发亦调用sliderRange函数。

}

.colorTextBox {

}