css 在HTML输入字段中放置不可编辑的百分比符号

wa7juj8i 于 5个月前发布在其他

关注(0)|答案(5)|浏览(47)

我目前有一系列的输入字段框是数字为基础的。我的麻烦是在每个框的末尾添加一个'%'符号。最终，我希望%符号是不可编辑的用户，但不确定如何去做。任何想法将是有益的
HTML

<div class="ModifiedValues">
    <span class="valuePadding"><center><b>New Value</b></center></span>
    <span class="valuePadding"><input type="number" max="100" accuracy="2" min="0" id="inputRRPDiscount" style="text-align:left;"><br></span>
    <span class="valuePadding"><input type="number" max="100" accuracy="2" min="0" id="inputMargin" style="text-align:left;"><br></span>
    <span class="valuePadding"><input type="number" max="100" accuracy="2" min="0" id="inputMarkUp" style="text-align:left;"><br></span>
    <span class="valuePadding"><input type="number" max="100" accuracy="2" min="0" id="inputSalesDiscount" style="text-align:left;"><br></span>
</div>

字符串
CSS

.ModifiedValues { 
        position: absolute;
        left: 250px;
        top: 28px;
        color: #666;
        font-size: 12px;
        width: 85px;
}   

.valuePadding { 
        padding:5px 5px 5px 5px;
        display:block;
}

型

css

来源：https://stackoverflow.com/questions/40885376/place-a-non-editable-percentage-sign-within-a-html-input-field

5条答案

按热度按时间

4smxwvx51#

给你

.valuePadding {
  border: 1px inset #ccc;
}
.valuePadding input {
  border: none;
  padding:0px;
  outline: none;
}

个字符

赞(0）回复(0）举报 5个月前

lndjwyie2#

我会将你的span样式化为看起来像你的输入，然后从输入中删除样式。然后你可以使用after psuedo选择器来添加百分比：

.input-holder {
  border: 1px solid #cccccc;
  display: inline-block;
  padding: 5px;
}
.input-holder > input {
  border: 0;
  margin: 0;
  padding: 0;
  outline:none;
}
.input-holder:after {
  content: '%';
}

个字符

赞(0）回复(0）举报 5个月前

7uhlpewt3#

假设你要把这些元素放在一个相对定位的div中，你可以这样处理：
超文本标记语言：

<div class="col-md-6">
        <span id="percent-sign">%</span>
        <input type="number" min="0" max="100">
</div>

字符串
CSS：

<style>
    #percent-sign {
        top: 8px;
        left: 45px;
        color: #555;
        position: absolute;
        z-index: 1;
    }
</style>

型
注意，我使用的是Bootstrap网格类（col-md-6），它已经为div提供了相对位置。如果不是这样，请为div设置相对位置。

赞(0）回复(0）举报 5个月前

tcomlyy64#

这是我的解决方案，不幸的是，我不能想出一个体面的方法来做它没有js，这不是太烦人，但..这是我最终使用：随意复制和粘贴js到一个文件，任何文本输入与id“存储输入”应相应地格式化。
需要注意的是，根据您的操作方式，您可能需要实现一个函数，以便在解析值之前从值中删除任何数字字符
希望它能帮助一些人

document.getElementById("PercentageInput").addEventListener("input", function (event) {
    formatPercentage(this, event);
});

// Function to format a percentage input
function formatPercentage(input, event) {
    // Remove non-numeric characters from the input value
    let value = input.value.replace(/[^\d]+/g, '');

    // Check if backspace key is pressed
    if (event.inputType === 'deleteContentBackward') {
        // Check if the first digit is being deleted
        if (value.length === 1) {
            // Set the value to 0.00% if the first digit is deleted
            input.value = '0.00%';
            return;
        }

        // Delete the last digit
        value = value.slice(0, -1);
    }

    // Check if the input is empty
    if (value === '') {
        // Display 0.00% when the input is empty
        input.value = '0.00%';
        return;
    }

    // Remove leading zeros from the input value
    value = value.replace(/^0+/, '');

    // Separate the whole part and decimal part of the value
    const wholePart = value.slice(0, -2);
    const decimalPart = value.slice(-2);

    // Add commas to the whole part for better readability
    let formattedValue = wholePart.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    
    // Combine the whole and decimal parts with a period and add a percent symbol
    formattedValue += `.${decimalPart}%`;

    // Set the formatted value back to the input
    input.value = formattedValue;
}

body {
  background-color: #283238;
}
.infoBox {
  display: flex;
  margin-top: 25px;
  width: 200px;
  background-color: grey;
  border: 6px outset darkgrey;
  color: darkergrey;
  font-weight: bold;
  text-align: center;
  justify-content: space-evenly;
}

label, input {
  width: 90%;
  margin:6px;
  border: 1px inset grey;
  text-align: center;
}

<body>
  <div class="infoBox" id="ValueA">
    <label for="PercentageInput">Input a Percentage</p>
    <input type="text" id="PercentageInput" placeholder="100.00%">
  </div>
</body>

赞(0）回复(0）举报 5个月前

ztyzrc3y5#

我刚刚创建了自定义的百分比输入元素。

<html>
<head>
    <title>Input Percent</title>
    <link rel="stylesheet" href="style.css">
    <script src='https://kit.fontawesome.com/a076d05399.js'></script>
</head>  
<body>
  <div class="percent_input" id="red_liquid_percent">

     <div class="button_group">
          <i id="up_button" class="fas fa-sort-up"></i>
          <i id="down_button" class="fas fa-sort-down"></i>
      </div>
     <p id="percent_value">0%</p>
  </div>
</body>
</html>

字符串
你可以在这里查看JSFiddle sample。

赞(0）回复(0）举报 5个月前

我来回答

css 在HTML输入字段中放置不可编辑的百分比符号

5条答案

相关问题

热门标签

最新问答