Javascript 你如何在输入文本字段中制作一些文本，粗体？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10839279/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you make just some text, inside an input text field, bold?
提问by clinchergt
I'm trying to get bold specific text, inside an input text field. I'm not sure how to go about it since html code isn't interpreted inside a text field, so anything like <b>won't work. Is it possible to bold just some text? Methods like bold() only add <b>around the string.
我正在尝试在输入文本字段中获取粗体特定文本。我不知道如何去做，因为 html 代码不是在文本字段中解释的，所以任何类似的东西<b>都不起作用。是否可以仅加粗一些文本？像 bold() 这样的方法只<b>在字符串周围添加。
Thanks
谢谢
采纳答案by Mic
Here is one trick.
这是一个技巧。
An INPUT field is over a SPAN. With a an example of function that puts the 3 first chars in bold. You may run into transparency trouble with older browser. In that case you can leave the normal input field without the bold effect.
INPUT 字段位于 SPAN 之上。举一个将前 3 个字符加粗的函数示例。使用旧版浏览器时，您可能会遇到透明度问题。在这种情况下，您可以保留没有粗体效果的普通输入字段。
<!DOCTYPE html>
<html lang="en">
<head>
<title>transp</title>
<style>
div{
position:relative;
}
input, span{
top:0;
position:absolute;
width:120px;
}
span{
top:2px;
left:2px;
z-index:1;
overflow:hidden;
}
input{
background:transparent;
z-index:2;
}
</style>
</head>
<body>
<div>
<input onkeyup="bold3(this)" />
<span id="back"></span>
</div>
<script>
function bold3(inp){
inp.style.color = 'transparent';
var span = document.getElementById('back');
span.innerHTML =
'<b>' +
inp.value.substr(0, 3) +
'</b>' +
inp.value.substr(3);
}
</script>
</body>
</html>
回答by Matt Kelly
It depends on what browsers you want to support. If you just want to support HTML5 browsers just drop in a div with the contenteditable flag set and style it with css to look like an input.
这取决于您要支持的浏览器。如果您只想支持 HTML5 浏览器，只需放入一个设置了 contenteditable 标志的 div 并使用 css 设置样式以使其看起来像一个输入。
<div contenteditable>Text <b>bold</b></div>
If the bold is in a very controlled area, than maybe do something like:
如果粗体位于一个非常受控制的区域，那么可能会执行以下操作：
<div>
<input type="text" style="font-weight: bold;" value="Bold text" />
<input type="text" value="This is not" />
</div>
Using CSS to style it and JS to manage the overhead. This could quickly get ugly though.
使用 CSS 对其进行样式设置，并使用 JS 来管理开销。不过，这很快就会变得丑陋。
回答by Travesty3
Perhaps a possible solution would be for you to use an editable div, like this:
也许一个可能的解决方案是让您使用可编辑的 div，如下所示：
<div contentEditable="true">
Lorem <b>ipsum</b> dolor
</div>
If you are trying to submit this value in a form, you'll have to use JavaScript to get the innerHTML of this div and assign it to a hidden input or something.
如果您尝试在表单中提交此值，则必须使用 JavaScript 来获取此 div 的 innerHTML 并将其分配给隐藏输入或其他内容。
回答by Miguel
we need something like the android view, which allows custom html markup, link recognition etc, natively... thats the problem.
我们需要类似 android 视图的东西，它允许自定义 html 标记、链接识别等，本机……这就是问题所在。
回答by Mehdi Raash
The most true way to have such a thing is to build your own custom element.
拥有这种东西的最真实的方法是构建自己的自定义元素。
you can create your own <my-input></my-input>element, and customise your own input.
您可以创建自己的<my-input></my-input>元素，并自定义您自己的输入。
