javascript 用文字取代<input text..>

我想通过文字来取代<input text...> 详情如截图。。。
请高手指点。。。

图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>    
</head>
<body>    
    
<form action="lol.php" method="POST">    
<div id="input_div">

<input type="radio" name="price" value="10" >$10<br>
<input type="radio" name="price" value="20" checked>$20<br>
<input type="radio" name="price" value="30">$30<br><br>
price$<input type="text" id="it" value=""><br><br>

quantity<button type="button" id="moins" onclick="minus()">-</button>
<input type="number" name="quantity" value="1" id="count">
<button type="button" id="moins" onclick="plus()">+</button><br><br>

Total <input type="text" value="" name="sub_total" id="total">

</div>

<button type="submit">GOGOGO</button>
    
</form>

<script>
$(document).ready(function() {
$('#it').val($('input[checked]').val());
$('#total').val($('input[checked]').val());

$('input[type=radio]').click(function() {
    $('#it').val(this.value);
    $('#total').val($('#it').val()* count);
});
});

    var price = document.getElementById('it');
    var count = 1;
    var total =0;
    var countEl = document.getElementById("count");
    var countEl1 = document.getElementById("total");

    function plus(){
        count++;
        total=price.value*count;
        countEl.value = count;
        countEl1.value = total;
        
    }
    function minus(){
      if (count > 1) {
        count--;
        total=price.value*count;
        countEl.value = count;
        countEl1.value = total;
      }  
    }

</script>
</body>
</html>

javascript

阅读 5.1k

3 个回答

xdsnet

✓ 已被采纳

你要先确认你的哪些input 是否确实不再需要进行直接输入，如果不需要，其实最简单的方法是定义相应的input类型样式，禁用可编辑属性(只读)，并使得显示像直接输出而已。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>    
</head>
<body>    
    
<form action="lol.php" method="POST">    
<div id="input_div">

<input type="radio" name="price" value="10" >$10<br>
<input type="radio" name="price" value="20" checked>$20<br>
<input type="radio" name="price" value="30">$30<br><br>
price$<input type="textbox" class="textbox  mleft" readonly id="it" value="" ><br><br>

quantity<button type="button" id="moins" onclick="minus()">-</button>
<input type="textbox" class="textbox  mcenter" readonly value="1" id="count">
<button type="button" id="moins" onclick="plus()">+</button><br><br>

Total <input type="textbox" class="textbox mleft" readonly value="" name="sub_total" id="total">

</div>

<button type="submit">GOGOGO</button>
    
</form>

<script>
$(document).ready(function() {
$('#it').val($('input[checked]').val());
$('#total').val($('input[checked]').val());

$('input[type=radio]').click(function() {
    $('#it').val(this.value);
    $('#total').val($('#it').val()* count);
});
});

    var price = document.getElementById('it');
    var count = 1;
    var total =0;
    var countEl = document.getElementById("count");
    var countEl1 = document.getElementById("total");

    function plus(){
        count++;
        total=price.value*count;
        countEl.value = count;
        countEl1.value = total;
        
    }
    function minus(){
      if (count > 1) {
        count--;
        total=price.value*count;
        countEl.value = count;
        countEl1.value = total;
      }  
    }

</script>
</body>
</html>

另在样式style.css文件中添加

.textbox {
  margin-top: 2px;
  border: none;/*去除边框，这样显示就像普通文字一样*/
  height: 25px;/*根据需要设置高度*/
  width: 275px;/*根据需要设置宽度*/
  background-color: #7a7a7a;/*注意，这里颜色要和底色一致*/
  color:#fff;/*注意，这里颜色要和文字色一致*/
}
.mcenter{
text-align: center;
}
.mleft{
text-align: left;
}