Question

我将让用户在文本框中输入文本以设置为其标识符，但是，他们只能输入1行文本。我无法改变它。

我想添加带有文字字符串并编辑|字符的CSS，并将其更改为<br>

他们将输入的文字字符串将是这样的：1234-5678-1234 | Jim

我想让它像这样出现：

1234-5678-1234
           Jim

我猜测代码可能如下所示：

p：包含（'|'）{代码为enter和float right}

Answer 1

我会将此作为评论发布，但我需要50个代表：）

就是这样：你想做什么需要JS。您应该尝试使用RegExp。使用纯css无法做到这一点。

Answer 2

除了空内容的特殊情况之外，无法根据文本内容选择元素。有一次（在2001年）draft建议:contains(...)选择器，但随着草案的推进（最终成为Selectors Level 3推荐），此功能已被删除。

还有一种方法可以根据内容选择元素。

此外，添加<br>是不可能的。您不能使用CSS添加标签或元素，只能通过伪元素添加文本内容。

此外，如果在input元素中读取输入，则无法将其内容显示为两行。如果用户输入实际上在一个不同的元素中回显，如p元素，那么它将以编程方式复制到那里，所以问题是为什么在那里进行更改。您可以使用JavaScript修改内容，在|元素的内容中将<br>替换为p将非常简单。

Answer 3

您应该尝试使用<div contenteditable="true"></div>。您可以通过根据需要包装和添加标记来使用JS来解决您的问题。此外，文本框不支持多行和＆amp;格式化。

对MDN上的contenteditable属性的良好读取：https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable

Answer 4

我做了一些测试并创建了以下RegExp：Example Here

<input type="text" id="demo" value="123-456-7890 | John Doe" size="35">

<button onclick="myFunction()">Try it</button>

<p style="text-align:left;" id="number"></p>
<p style="text-align:right;" id="name"></p>

<script>

function myFunction() {
    var str = document.getElementById("demo").value;
    strnum = str.indexOf('|');
    var name = str.slice(strnum+1);
    var number = str.slice(0,strnum);
    document.getElementById("number").innerHTML = number;
    document.getElementById("name").innerHTML = name;
}
</script>

这是你想要的吗？

如何仅选择文本的某个字符并将其转换为中断？

4 个答案: