先小小的鄙视下我自己。 - -今天要做一个文本框,大家应该知道信笺纸吧,一行一行的,有下划线。用input我看了下,要换行的化实现可能能实现,但是麻烦。用 textarea  直接可以多行,但是每一行没办法事先就给上下划线吧。非要给的话估计也是给文字加下划线了
所以我问下,是怎么实现这个的,我以前看好多网站,还是QQ空间都有这个效果的嘛。
献上100分。最好有简单的方法哈,太复杂的方法的化我也能用几种方式实现。

解决方案 »

  1.   

    比如这样,用line-height控制行高,背景图高度=行高:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    textarea { width:300px; height:300px; border:1px solid #CCC; line-height:30px; background:transparent url(underline.gif) repeat; }
    </style>
    </head><body>
    <textarea></textarea>
    </body>
    </html>图:
      

  2.   

    http://hi.csdn.net/attachment/4865_1309338077522n.gif
      

  3.   

    发现用line-height控制是无效的,还得根据字体来确定背景图的高度尺寸,微调一下应该可以做出不错的效果的..
      

  4.   

    我也感觉到用背景图片用css是不太好控制哦。要根据字体大小来变化。
      

  5.   

    就是嘛。关键是你要制作多少图片呢其实我想过用span或者td来实现,不过要判断屏幕宽度来还行。输入的时候就给span或者td加上input ,不过每输入一个内容都要去监听的这个input,想想太麻烦了。实现我觉得可能还是能实现。我就看下还有其他更简单的办法没。
      

  6.   

    我记得fckeditor有这个功能,记不清了,LZ可以看看!
      

  7.   

    http://wenku.baidu.com/view/4adca91bff00bed5b9f31d0d.html
    LZ可以看下这个,希望能给你点想法