求助js动态实现输入框文字分色显示

可以试试用div添加contenteditable属性模拟输入框。

解决方案 »

  1.   

    你的是html编辑器还是textarea或者text这种？html编辑器自己增加标签来实现，textarea或者text这种实现起来比较麻烦，要用层来模拟。。
      

  2.   

    html编辑器我不是很懂  我要在jsp上面一个textarea中实现 
      

  3.   

    这个我查了一下 好像是html5的新功能 我想我们现在的项目应该还没有用html5吧
      

  4.   

    改用html编辑器（就是你发布文章时可以加粗描红那种，不要告诉我你连这个都不知道），推荐kindeditor然后用标签加颜色后放入你截取的内容，textarea文字加了不了颜色，要用层来浮动在textarea上面有得搞，文字不好对齐如果你只兼容ie，textarea可以appendChild添加带颜色的标签，标准浏览器显示不出来这些标签<textarea id="ta"></textarea>
    <script>
        var ta = document.getElementById('ta');
        var sp = document.createElement('span'); sp.style.color = 'red'; sp.innerHTML = 'xxoo';
        ta.appendChild(sp); 
        sp = document.createElement('span'); sp.style.color = 'green'; sp.innerHTML = 'xxoo';
        ta.appendChild(sp);
        </script>
      

  5.   

    如果楼主可以翻墙，可以看看Twitter的发推文功能，基本就是楼主需要的那种功能。具体实现不清楚。
      

  6.   

    试了下2楼的方法，IE下可用
    <html>
    <head>
    </head>
    <body>
    <textarea id ="test"></textarea>
    <script type="text/javascript" src ="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
    <script language="javaScript">
     $(document).ready(function(){
    $("#test").keyup(function(){
    if($(this).val().length>10 && $(this).val().length <= 20){
    var txt1 = $(this).val().substring(0,10);
    var txt2 = $(this).val().substring(10);

    var ta = document.getElementById('test');
    ta.innerHTML = '';
    var sp = document.createElement('span'); 
    sp.style.color = 'black'; 
    sp.innerHTML = txt1;
    ta.appendChild(sp); 
    sp = document.createElement('span'); 
    sp.style.color = 'red'; 
    sp.innerHTML = txt2;
    ta.appendChild(sp);
    }else if($(this).val().length>20){
    var txt1 = $(this).val().substring(0,10);
    var txt2 = $(this).val().substring(10,20);
    var txt3 =  $(this).val().substring(20);

    var ta = document.getElementById('test');
    ta.innerText = '';
    var sp = document.createElement('span'); 
    sp.style.color = 'black'; 
    sp.innerHTML = txt1;
    ta.appendChild(sp); 
    sp = document.createElement('span'); 
    sp.style.color = 'red';
    sp.innerHTML = txt2;
    ta.appendChild(sp);
    sp = document.createElement('span'); 
    sp.style.color = 'blue';
    sp.innerHTML = txt3;
    ta.appendChild(sp);
    }
    });
       });
    </script>
    </body>
    </html>
      

  7.   

    感谢 showbo gtkdan1 的帮助，我试一下看看