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 {

}

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

HTML滑动条自动滑动,HTML5新特性——自定义滑动条（input[type=range]）
HTML 4.01 与 HTML5之间的差异以下 input 的 type属性值是 HTML5 中新增的: color.date.datetime.datetime-local.month.week ...
html5中13种文本框汇总
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
html range关联文本框,HTML5gt;meter标签与input(type=range)标签结合制作简易范围指示器...
HTML5>meter标签与input(type=range)标签结合制作简易范围指示器发布时间:2020-03-26 15:41 很多时候我们能看到这样的表示范围的优化工具,能给人带来很好的 ...
input type=range标签用法实例代码
在HTML5中,又新增许多新<input>控件类型,比较实用的一个就是<input type="range">,以滑竿的方式来调整value值,在这以前需要 ...
改变 input[type=range] css样式
效果图: 代码: <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
前端问题求助input type=“range”问题求助
目前我在做这样一个功能,PC端和手机端同步显示某个进度条. 原理是这样的,当我点击PC端的进度条时,手机端要跟着同步显示前端代码: <div class="one"> ...
html5简介的文本框,HTML5实战与剖析之表单——文本框脚本
文本框类型在编写表单相关的东西的时候,通常有两个标签标示文本框:一种是单行文本框input标签,另一种是多行文本框textarea标签.这两种标签比较相似,但是他们也有区别. 如果一定要用input ...
html5 数值文本框,HTML5新控件 - 数值输入框
图像按钮当type="p_w_picpath"时,浏览器会在相应位置产生一个图像按钮. 基本语法: DOCTYPE html> 笔者,不玩网游还差4天就两个月了.我常常觉得 ...
HTML5 实现给Text文本框中加入图片
<style type="text/css">input{/*文本框的大小*/width:200px;height: 35px;/*图片*/background: ur ...

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

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

最新文章

热门文章