<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
a {
font-size: 14px;
font-family: simsun;
}
</style>
<body>
<input type="text" style="font-size: 14px; 2px; padding: 0 10px; font-family: simsun;">
</body>
</html>
<script>
function textWidth(text){
var sensor = document.createElement('a');
sensor.innerHTML = text;
var body = document.getElementsByTagName('body')[0];
body.appendChild(sensor);
var width = sensor.offsetWidth;
body.removeChild(sensor);
return width;
};
var inputdom = document.getElementsByTagName('input')[0];
inputdom.addEventListener('input', function() {
var width = textWidth(this.value);
this.style.width = width +'px'
})
</script>