Styling two buttons with jquery

by Paulpro

HTML

<input id="tehinput" type="text" />

CSS

.button{
    height:22px;
    cursor:default;
}

.btn-left{
    background-position: top left;
    background-repeat: no-repeat;
    background-image:url(../images/btn-left.png);
    width: 11px;
    height: 22px;
    display: block;
    float: left;
}

.btn-middle{
    background-position: top left;
    background-repeat: repeat-x;
    display: block;
    height: 10px;
    padding: 6px 0;
    float: left;
    text-align: center; 
    font-size:0.75em;
    line-height:0.813em;
    background-image: url(../images/btn-middle.png);    
    color: #000; 
}

.btn-right{
    background-position: top left;
    background-repeat: no-repeat;
    width: 11px;
    height: 22px;
    display: block;
    float: left;
    background-image: url(../images/btn-right.png);
}

.btn-left.btn-hover{
    background:url(../images/btn-left-hover.png);
}

.btn-middle.btn-hover{
    background:url(../images/btn-middle-hover.png);
}

.btn-right.btn-hover{
    background:url(../images/btn-right-hover.png);
}

JavaScript

var input = document.getElementById('tehinput');
input.onchange = function(){
    var val = this.value, sign = '';
    if(val.lastIndexOf('-', 0) === 0){
        sign = '-';
        val = val.substring(1);
    }
    var parts = val.split('.').slice(0,2);
    if(parts[0] && parseInt(parts[0], 10).toString() !== parts[0]){
        parts[0] = parseInt(parts[0], 10);
        if(!parts[0])
            parts[0] = 0;
    }
    var result = parts[0];
    if(parts.length > 1){
        result += '.';
        if(parts[1].length > 3 || 
          parseInt(parts[1], 10).toString() !== parts[1]){
              parts[1] = parseInt(parts[1].substring(0,3), 10);
              if(!parts[1])
                  parts[1] = 0;
        }
        result += parts[1];
    }
    this.value = sign+result;
}