This article will be continuously updated, because the pit is never finished…………

Changes the color of the cursor in the Input box

The default cursor color on Chrome is black, but you can see that the cursor on GitHub is white. How does CSS change this?

1. Use color

The cursor color is inherited from the font color of the current input field, so it can be changed using the color property:

input{
    color:red
}
Copy the code

2. Use Caret-color

If you want to change the cursor color without changing the font color, use the caret-color property:

input{
    caret-color:red
}
Copy the code

Hide the cursor (weird requirement)

1. Use cursor color transparency to fool users

input{
    caret-color:transparent
}
Copy the code

The size of the placeholder text in the input

input::-webkit-input-placeholder{
    font-size:14px;
    font-family:PingFangSC;
    font-weight:400;
    color:red;
}
Copy the code

Input [type=number] cannot get decimal point

Solution a:

Change type to text,

The drawback is that the pop-up is not a numeric keypad (does not meet the requirements)

Method 2:

<input type="number" pattern="[0-9] *">
Copy the code

Pay attention to the point

  • In iOS, only [0-9]* can be adjusted to the nine-grid numeric keypad, \d does not work
  • Up to Android 4.4 (including the X5 kernel), both have numeric keypads tuned;

Method 3:

Dynamically modify input properties

The binding of the inputtypeAttribute < input:type="onFocus? 'text':'number'" placeholder='Please enter amount' v-model='inputValue' @keyup='handle($event)'>
Copy the code
window.addEventListener('focus',()=>{
    this.onFocus = true
})

window.addEventListener('blur',()=>{
    this.onFocus = false
})
Copy the code

Extension (product requirements come also ～～～～)

1. Input box can only input two decimal points, four decimal points (code redundancy, free will be streamlined, please see ~~~~) solution four (violent processing)

handle(event){
    let val= event.target.value.replace(/[^\d|.]/g,' ');
    letReg = / ^ \ d {1, 4} \ \ d {0, 1}} {0, 2 $/;if(val.indexOf('0') = = 0) {if(val.substr(val.indexOf('0')+1,1) == 0){val ='0'
        }else if(val.substr(val.indexOf('0') + 1, 1) = ='. '){
            val = val
        } else{
            val = val.substr(val.indexOf('0')+1)
        }
    }
    if(reg.test(val)){
        if(val.indexOf('. ') != -1){
            if(val.substr(val.indexOf('. ')).length>3 ){
                return this.inputValue = val.substr(0,val.indexOf('. ') + 2)}return this.inputValue = val;
        }else{
            if(val.length>4){
                returnThis. InputValue = val. Substr (0, 4); }else{
                return this.inputValue = val
            }
        }
    }else{
        if(val.indexOf('. ') = = 0) {return this.inputValue = ' ';
        }else if(val.indexOf('. ') = = 5) {let arrs = val.split(' ');
            arrs.splice(val.indexOf('. ') - 1, 1);let vals = arrs.join(' ')
            return this.inputValue = vals
        }else{
            if(val == ' ') {return this.inputValue = ' '
            }
            let Vals = val.substr(0,val.length-1);
            returnthis.inputValue = Vals; }}}Copy the code

Input the input box cannot be entered

User-select Attribute details

It is possible that the following reasons exist in the code

xxxxx{
    -webkit-user-select:none    
}
Copy the code

Change to

*:not(input,textarea) { 
    -webkit-user-select: none; 
}
Copy the code

Numerical accuracy problem

Historical background: the computer in the four operations, for the infinite cycle of decimals, will be rounded for example: 0.1 + 0.2 = 0.30000000000000004

Method 1: toFixed()

  • Specify the decimal number to keep (0.1+0.2). ToFixed (1) = 0.3; This method toFixed is rounded and not very accurate. It is not recommended to use it for the precise calculation of the amount, and there are differences in the calculation results of toFixed by different browsers.

  • 1.335.toFixed(2) = 1.33

  • The toFixed() method is handled differently by different browsers. For example :(2.445).tofixed (2) is executed “2.45” in IE, but “2.44” in Chrome.

Method 2:

Upgrading the number to be calculated (multiplied by 10 to the NTH power) to an integer that the computer can recognize accurately and then demoting it (divided by 10 to the NTH power) is a common way most programming languages deal with differences in accuracy.

function ToFixed(num,s){
    let times = Math.pow(10,s)
    let des = num * times + 0.5
    des = parseInt(des, 10) / times
    return des + ' '
}
Copy the code

Methods three

Use the class library

Math.js

Math.js is an extended Math library for JavaScript and Node.js. It has a flexible expression parser, supports symbolic computation, comes with a large number of built-in functions and constants, and provides an integrated solution that can handle different data types such as numbers, large numbers, complex numbers, fractions, units, and matrices. Powerful and easy to use.

GitHub:github.com/josdejong/m…

decimal.js

Provides JavaScript with arbitrary precision values of decimal type.

GitHub:github.com/MikeMcl/dec…

big.js

A small, fast JavaScript library that provides arbitrary precision values of decimal type.

GitHub:github.com/MikeMcl/big…

At the end

The above content is the input problem I encountered and the solution, if there is an error, welcome to correct!

If you found this article helpful, please don’t forget to like it and share it with your friends ~ 😊😊😊