如何在輸入文本字段中粗體顯示一些文本？

我試圖在輸入文本字段中獲取大膽的特定文本。我不知道該怎麼做，因爲HTML代碼不能在文本字段中解釋，所以像<b>這樣的東西將不起作用。是否可以大膽地只是一些文字？像bold（）這樣的方法只在字符串周圍添加<b>。如何在輸入文本字段中粗體顯示一些文本？

感謝

來源

2012-05-31 clinchergt

不在簡單的輸入字段中。請查找[可編輯的div]（http://blog.whatwg.org/the-road-to-html-5-contenteditable），或者根本不要。 –

你不這樣做，除非你創建一個完美覆蓋輸入的元素，這是一個完全的噩夢。 RTE的做法是在內容中使用iframe，以便可以對其進行管理。 – MetalFrog

這裏重複的問題[http://stackoverflow.com/questions/5408292/just-trying-to-give-a-bold-font-to-an-input-text](http://stackoverflow.com/questions/5408292 /試圖給出一個粗體字體到一個輸入文本） –

這裏有一個竅門。

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>

來源

2012-05-31 19:04:17 Mic

我要給這個答案一個鏡頭，我在我正在處理的頁面之外測試它，它似乎工作得不錯。謝謝 – clinchergt

請注意，您開始了一條不尋常的路線，並且可能會在途中帶來一些驚喜。另一種方法是在輸入字段中輸入格式化結果並在其下輸入。就像你在這裏回答問題一樣。 – Mic

試試這個：

<input type="text" style="font-weight: bold;" value="Some Value" />

但這樣的元素中的整個文本會以粗體顯示。我想有沒有簡單的方法來樣式只有一塊文本

來源

2012-05-31 18:37:41

OP要**輸入的部分**爲粗體。 –

也許是可能的解決辦法是讓你使用一個可編輯的DIV，像這樣：

<div contentEditable="true"> 
    Lorem <b>ipsum</b> dolor 
</div>

如果你想提交此值在一個表單中，您必須使用JavaScript來獲取此div的innerHTML並將其分配給隱藏的輸入或其他內容。

來源

2012-05-31 18:45:48 Travesty3

這可能是最簡單的解決方案，如果我無法讓Mic的解決方案在實際頁面上工作，我一定會使用它。我實際上試圖獲得innerHTML，所以表單可以得到它，但我沒有成功，它只是忽略了html代碼。是否因爲我使用了GET而不是POST？ – clinchergt

@clinchergt：我必須看到一些示例代碼，您曾用它來提供幫助。 – Travesty3

這取決於您想要支持的瀏覽器。如果您只是想支持HTML5瀏覽器，只需將其設置爲contenteditable標誌，並使用css將其設置爲輸入即可。

<div contenteditable>Text <b>bold</b></div>

如果大膽的是在一個非常可控區域，比也許這樣做：

<div> 
    <input type="text" style="font-weight: bold;" value="Bold text" /> 
    <input type="text" value="This is not" /> 
</div>

使用CSS樣式它和JS來管理開銷。儘管這可能會很快變得醜陋。

來源

2012-05-31 18:52:38

，我們需要像android的視圖，它允許自定義HTML標記，鏈路識別等，本身...這就是問題。

來源

2016-09-26 14:46:30 Miguel

擁有這種東西的最真實的方法是建立自己的定製元素。

您可以創建自己的<my-input></my-input>元素，並自定義您自己的輸入。

來源

2018-01-15 19:41:48

如何在輸入文本字段中粗體顯示一些文本？

回答

相關問題