輸入文本的兩種不同顏色

Question

我必須實現如下圖所示的輸出

黑色文本是名稱，橙色文本是狀態。 根據狀態，它可以像 Pending --> Orange、Completed-->Green 這樣改變。 這些事情我可以通過在一個位置是相對的div內有一個input標簽和span標簽來實現

<div style="display: inline-block;position: relative;overflow: hidden;width:100%">

                <input
                id="input"
                class={computedInputClass}
                type="text"
                role="textbox"
                required={required}
                autocomplete="off"
                value={computedInputValue}
                name={name}/>

                <span class={computedStatusClass} style={componentStyle}> - {inputStatus}</span>
</div>

我面臨的唯一問題是放置狀態文本的位置。

根據名稱文本的長度，狀態文本的左側也必須進行調整。 我正在用這個計算進行左調整，但它不起作用

 get componentStyle() {  
       // this.computedInputValue = 'William Thomas';
        return `left:${this.computedInputValue.length-2}em`;
    }

如果我的方法是錯誤的，請給我建議一個好的解決方案，但我肯定必須使用<input>標簽，我也不能刪除它，因為它是 LWC 組件

這是我嘗試過的

HTML

<template>
  <div style="display: inline-block;position: relative;overflow: hidden;width:100%">
                <input
                id="input"
                class={computedInputClass}
                type="text"
                role="textbox"              
                autocomplete="off"
                value={computedInputValue}
               
            />
                <span class={computedStatusClass} style={componentStyle}> - {inputStatus}</span>
            </div>
</template>

JS

import { LightningElement, track } from 'lwc';

export default class App extends LightningElement {

    @track inputStatus='Pending';

     get computedInputValue() {
        return 'William ThomasS';
    }
     
    get componentStyle() {         
        return `left:${this.computedInputValue.length-2}em`;
    }

    get computedStatusClass()
    {
     return 'customizedDropdownInputStatusLeft customizedDropdownPendingStatusColor';     
    }

     get computedInputClass() {
       
        return'slds-input';
    }
}

CSS

.customizedDropdownInputStatusLeft{
    position: absolute;   
    top:8px
}
.customizedDropdownPendingStatusColor{
    color:orange;
}
.customizedDropdownStatusPadding{
    padding-left:5px;
}

Answer 1

我相信您可以使用以下代碼實現您想要的結果。

關鍵部分是一個隱藏的 span 元素和一個resizeUserInput函數：

hiddenSpan.textContent = userInput.value - 將輸入文本復制到隱藏的 span 元素中。

userInput.style.width = hiddenSpan.offsetWidth + px - 獲取隱藏元素的寬度並將其應用於用戶輸入的寬度。

工作示例

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link href="src/styles.css" rel="stylesheet" />
  </head>
  <body>
        <div class="box">
    <p>
      <span class="hidden-span" id="hidden-span"></span>
            <input class='user-input' id="user-input" type="text" value="William Thomas" />
      <span> - </span>
      <span class="status">Pending</span>
        </p>
        <div>
    <script src="src/index.js"></script>
  </body>
</html>

CSS

body,
input {
  font-family: sans-serif;
  font-size: 16px;
  margin: 0;
  padding: 0;
}

.box {
  border: 1px solid lightgrey;
  border-radius: 5px;
  display: flex;
  padding: 0 10px;
  margin: 10px;
  justify-content: space-between;
}

.hidden-span {
  position: absolute;
  height: 0;
  overflow: hidden;
  white-space: pre;
}

.user-input {
  border: none;
  min-width: 10px;
  outline: none;
}

.status {
  color: orange;
}

JS

const px = "px";

const hiddenSpan = document.getElementById("hidden-span");
const userInput = document.getElementById("user-input");

const resizeUserInput = () => {
  hiddenSpan.textContent = userInput.value;
  userInput.style.width = hiddenSpan.offsetWidth + px;
};

resizeUserInput() // run onload
userInput.addEventListener("input", resizeUserInput); // run on subsequent changes

輸入文本的兩種不同顏色

問題描述

HTML

JS

CSS

1 個解決方案

解決方案1
1 已采納 2020-08-26 00:56:14

輸入文本的兩種不同顏色

問題描述

HTML

JS

CSS

1 個解決方案

解決方案1 1 已采納 2020-08-26 00:56:14

解決方案1
1 已采納 2020-08-26 00:56:14