JWorld@TW the best professional Java site in Taiwan
      註冊 | 登入 | 全文檢索 | 排行榜  

» JWorld@TW » AJAX討論區  

按列印兼容模式列印這個話題 列印話題    把這個話題寄給朋友 寄給朋友    訂閱主題
reply to topicthreaded modego to previous topicgo to next topic
本主題所含的標籤
無標籤
作者 求救 : 在輸入框輸入文字,如遇空白時前後一個字元以其他顏色呈現
030251888





發文: 140
積分: 0
於 2016-08-21 15:45 user profilesend a private message to userreply to postreply to postsearch all posts byselect and copy to clipboard. 
ie only, sorry for netscape users:-)add this post to my favorite list
想請教前輩們~~~

功能:在輸入框輸入文字,如遇空白時前後一個字元以其他顏色呈現

這個功能有辦法做出來嗎??
目前有試過幾個方
方法1 .試過 input 但Input裡無法改變顏色 (失敗)
方法2 .使用Div 文字輸入框 幾乎快完成了,但最後卻遇到了指標定位的問題,當輸入完指標就會重置 (接近失敗,苦惱要不要繼續弄指標

不知道前輩們有沒有更好的做好,或是有相關的套件可以推薦,小弟感激不盡。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
.Input{
  padding: 5px;
  border: 1px solid #6699cc;
  width: 360px;
  word-wrap: break-word;
  min-height: 15px;
  outline: 0;
  -webkit-user-modify: read-write-plaintext-only;
}
 
[contentEditable=true]:empty:not(:focus):before{
    content:attr(data-ph);
    color: #888888;
}
</style>
<script type="text/javascript" src="jquery-1.8.3.js"></script>  
<script>
$(document).ready(function () {
   $('.Input').on("keyup",function (e) {
        var m_e = e || window.event;
        var keycode = m_e.which;
 
        //顏色
        if(keycode != 37 && keycode != 38 && keycode != 39 && keycode != 40){
            var text = upateTextUpDownColor($(this).text());
            $(this).html(text);
        }
  })
});
//改變字串空白前後字元的顏色
function upateTextUpDownColor(topicKeywordText) {
    var newTopicKeywordText = "";
    for (var i = 0; i < topicKeywordText.length; i++) {
        if ((i + 1) < topicKeywordText.length && topicKeywordText.charAt(i).trim() != "" && topicKeywordText.charAt(i + 1).trim() == "") {
            newTopicKeywordText += "<font color='tomato' style='font-weight:bold;' >" + topicKeywordText.charAt(i) + "</font>";
        } else if (i != 0 && topicKeywordText.charAt(i).trim() != "" && topicKeywordText.charAt(i - 1).trim() == "") {
            newTopicKeywordText += "<font color='tomato' style='font-weight:bold;' >" + topicKeywordText.charAt(i) + "</font>";
        } else {
            if (topicKeywordText.charAt(i).trim() == "") {
                newTopicKeywordText += " ";
            } else {
                newTopicKeywordText += topicKeywordText.charAt(i);
            }
        }
    }
    return newTopicKeywordText;
}      
</script>
</head>
<body>
<div id="Input" class="Input" contenteditable="true" data-ph="請輸入..."></div>
</body>
</html>


030251888 edited on 2016-08-21 15:48
reply to postreply to post
努力尚未成功,松鼠扔須努力
» JWorld@TW »  AJAX討論區

reply to topicthreaded modego to previous topicgo to next topic
  已讀文章
  新的文章
  被刪除的文章
Jump to the top of page

JWorld@TW 本站商標資訊

Powered by Powerful JuteForum® Version Jute 1.5.8