我試圖在我的textarea中實現突出顯示效果,基本上當用戶鍵入一個句子時,正在添加背景顏色,類似於此效果:http://jsbin.com/josatozeyi/1/edit(我知道這是對textarea的調整大小,但有沒有其他方法?)突出顯示textarea中的輸入
<textarea class='animated'>With CSS transition.</textarea>
有什麼建議嗎?
附加信息 這就是我的意思:http://prntscr.com/63xdi9
我試圖在我的textarea中實現突出顯示效果,基本上當用戶鍵入一個句子時,正在添加背景顏色,類似於此效果:http://jsbin.com/josatozeyi/1/edit(我知道這是對textarea的調整大小,但有沒有其他方法?)突出顯示textarea中的輸入
<textarea class='animated'>With CSS transition.</textarea>
有什麼建議嗎?
附加信息 這就是我的意思:http://prntscr.com/63xdi9
添加CSS規則,增加了一個背景色爲焦點textarea的。
input:focus {
background-color: yellow;
}
嗨,這個只是使整個textarea背景變成黃色,而不僅僅是文本的特定背景。 – KingAlfredChameleon 2015-02-11 20:33:20
你可以達到你想要contenteditable
span元素,然後在重點應用背景顏色的影響:http://jsfiddle.net/13L9zudf/
$(document).ready(function(){
var defaultVal = "Type content here...";
$("div.textbox span").keyup(function(){
if($(this).html() == "")
{
$(this).html(defaultVal);
}
}).keydown(function(){
if($(this).html() == defaultVal)
{
$(this).html("");
}
});
});
div.textbox {
border: 1px #000 solid;
padding: .5em;
width: 30em;
height: 10em;
overflow-y: scroll;
}
div.textbox span {
line-height: 1.5em;
max-width:30em;
display: inline-block;
}
div.textbox span:focus {
background: #ff0;
border:0;
outline: 0;
}
div.textbox span:active {
border: 0;
outline: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="textbox">
<span contenteditable="true">Type content here...</span>
</div>
嘿,http://prntscr.com/63xdi9,我想我不清楚,對不起。 – KingAlfredChameleon 2015-02-11 20:44:10
這究竟是什麼不適合你的情況?突出顯示是否需要更多填充?文字周圍的可見框?我不知道我發佈的內容如何不能回答你的問題 – 2015-02-11 20:47:10
呵呵,首先它是一個非常奇怪的textarea,看起來每次我按下時都會創建一個新的textarea,其次。而不是突出顯示特定的文本,它似乎突出顯示整個textarea框(也許這可能是填充問題?)。此外,我不會降級你的答案,我非常感謝你的幫助! – KingAlfredChameleon 2015-02-11 20:50:47
它太複雜,我,但我發現它,它可能是有用的:
highlightTextarea的目標是將文本的某些部分高亮顯示爲textarea 或輸入。它可以突出顯示一組單詞或特定範圍。
http://mistic100.github.io/jquery-highlighttextarea/
來源:mistic100
是否確定要加s''到''
只要它達到預期的結果,並不會弄亂textarea的功能,那麼是的:) – KingAlfredChameleon 2015-02-11 20:48:28
我想,如果你以真實的形式使用這個textarea並且可以提交,那就不行了。 – Stickers 2015-02-11 20:50:28