Javascript 输入文本有两种不同的颜色

我必须实现如下图所示的输出

黑色文本为名称，橙色文本为状态。根据状态的不同，它可以更改为挂起-->橙色、完成-->绿色。我可以通过在

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>

如果我的方法是错误的，请建议我好的解决方案，但我必须使用

标记，我不能删除它，因为它是LWC组件

这是我试过的

HTML CSS

---

我相信您可以通过以下代码实现所需的结果

关键部分是一个隐藏的span元素和一个

resizeUserInput

函数：

hiddenSpan.textContent=userInput.value

-将输入文本复制到隐藏的span元素中

userInput.style.width=hiddenSpan.offsetWidth+px

-获取隐藏元素的宽度，并将其应用于用户输入的宽度

HTML

包裹沙箱

- 
悬而未决的

CSS

body，
输入{
字体系列：无衬线；
字体大小：16px；
保证金：0；
填充：0；
}
.盒子{
边框：1px纯色浅灰色；
边界半径：5px；
显示器：flex；
填充：0 10px；
利润率：10px；
证明内容：之间的空间；
}
.隐藏跨度{
位置：绝对位置；
身高：0；
溢出：隐藏；
空白：预处理；
}
.用户输入{
边界：无；
最小宽度：10px；
大纲：无；
}
.地位{
颜色：橙色；
}

JS

const px=“px”；
const hiddenSpan=document.getElementById（“隐藏span”）；
const userInput=document.getElementById（“用户输入”）；
const resizeUserInput=（）=>{
hiddenSpan.textContent=userInput.value；
userInput.style.width=hiddenSpan.offsetWidth+px；
};
resizeUserInput（）//运行onload
userInput.addEventListener（“输入”，resizeUserInput）；//运行后续更改

为什么不将名称和“状态”放在同一个组件中？这样，名称会自动调整状态。我尝试过这样做，但如果你愿意，我无法实现颜色（橙色或绿色），我会为你修复它。您提供的代码片段不完整。@AlexMckay，因为其LWC组件曾考虑在Salesforce站点中创建游乐场，但不幸的是，Salesforce游乐场今天无法工作。我可以在这里添加文件吗？@SFDC初学者展示您的尝试

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

<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>

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';
    }
}

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