Javascript 敲击输入文本值

我有一个文本类型的输入框，输入值有两个单词，我只需要敲打第一个单词，而不是第二个，不幸的是，我无法编辑html。我应该只使用javascript和css。我尝试过使用css

文本装饰：行通过但这两个词都很醒目。非常感谢您的帮助


.text blot{text装饰：线穿过；}
可以使用带有
HTMLElement.value
的JavaScript访问
输入
元素中的
值
属性。不幸的是，样式将应用于整个输入值。所以这有点棘手

因为
值
是一个字符串，它将包含两个单词。我使用了一些JavaScript将字符串拆分为一个单词数组，这样您就可以使用CSS通过
文本装饰：行通过
敲打第一个单词，第二个单词可以有
文本装饰：无
（无敲打通过）

我不建议在生产环境中使用这种方法，但我通过创建两个
span
元素来保存这两个单词，并相应地对它们进行样式化，从而实现了这一点。然后，我给原始的
input
值一个带有
color:transparent
的透明文本颜色，并将两个
span
元素放置在输入值的顶部，以实现所需的第一个单词到第二个单词的笔划


const textBlot=document.querySelector（“.text blot”）；
const demo=document.querySelector（“.demo”）；
const word1=document.createElement（“span”）；
const word2=document.createElement（“span”）；
单词1.setAttribute（“类”、“罢工”）；
单词2.setAttribute（“类”、“无罢工”）；
demo.appendChild（word1）；
demo.appendChild（word2）；
const arr=textBlot.value.split（“”；//创建一个单词数组
word1.innerHTML=arr[0]；
word2.innerHTML=“”+arr[1]
.text blot{
/*文字装饰：线条贯通*/
z指数：1；
颜色：透明；
}
.罢工{
文字装饰：线条贯通；
}
.不罢工{
文字装饰：无；
}
.演示跨度{
位置：相对位置；
左：-9.5雷姆；
z指数：99；
}

这是否回答了您的问题？看看这是
p
tag，我的是
input
tag。我需要修改设置为
value
attribute@premkumar我所包含的链接具体指的是
输入
元素及其
值
。不是一个
p
标签。@TannerDolby那条评论不适合你，你的答案没有帮助，因为它涉及修改html@premkumar我的回答对你有帮助吗？目前，还没有一个明确的方法来完成你的目标。应用于输入元素的样式将应用于该输入元素值属性中的所有文本。使用一些我在下面变戏法的黑客是一种让它工作的方法。是的，你的回答很有帮助me@premkumar好的，太好了。请随意将其标记为已接受。