CSS 和 JS高手请进,帮忙看看这个问题, 有解法解决没, 跪求正解.

本帖最后由 myChat11 于 2010-09-15 00:37:17 编辑

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

是想模拟做成csdn博客发新文章或者QQ空间法新日志那样？
反正不能編輯，你何不將textarea 換成div。
你可以將div的樣式改成看上去和textarea一樣。
您试了上面的代码就知道了, 图片插入到textarea 中以后, 是可以拖动边框改变大小的, 我现在不希望能够改变它的尺寸 .
textarea 中的文本是需要编辑的, 如果不需要编辑,我直接设置textarea 的Readonly属性了, 只是图片尺寸希望可以固定.
别纯支持啊....都帮忙试一下, 看看CSS,能不能够实现....
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<script language="javascript" type="text/jscript">
        function selImg(s){
        if(!s){return false;}
        var h=s.substr(s.lastIndexOf(".")+1,3);
        if(h=="gif"||h=="jpg"){
        var txt=document.getElementById("txt")
        o=document.createElement("img");
        o.src=s;
        o.enableviewstate="false" ;
        TextArea1.appendChild(o);
        }
        else{
        alert("请选择正确的图片格式~")
        }
        }
    </script>
<body>
        <textarea id="TextArea1" style="width: 256px; height: 177px"></textarea>
    <br />
        <input id="img" type="file" value="选择图片"/>
        <input type="button" value="添加" onclick="selImg(img.value)" />
</body>
</html>
那就不要使用textarea
textarea好像的确是不能解决，如果改成readonly后，是不能编辑，但textarea你也不能操作了
楼主不要把思维局限于一个textarea来解决所有问题,你这个问题用两个HTML元素就可以解决了,一个放图片,一个放文字... ...
我觉得是思路问题，楼上都已经说了，你创建到textarea里面本身就是可编辑的，你可以考虑两种方式：
1、不上传到textarea，楼上也已经说了，你可以上传到div里面显示，然后把html代码复制到textarea中；
2、在保存到数据库的时候不保存图片的高度和宽度就行了。
我给的那段HTML代码,够简单了吧, 希望可以设计一下 Img的风格为固定尺寸 .
你参考下csdn论坛，这种表情图片的方法。
论坛是用的UBB .而且不能够直接显示出图片...-_-||
加上一句  o.onresize = function() { alert("不要改变图片大小."); return false; }<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head><script language="javascript" type="text/jscript">
    function selImg(s) {
        if (!s) { return false; }
        var o = null;
        var h = s.substr(s.lastIndexOf(".") + 1, 3);
        if (h == "gif" || h == "jpg") {
            var txt = document.getElementById("txt")
            o = document.createElement("img");
            o.src = s;
            o.enableviewstate = "false";
            txt.appendChild(o);
            o.onresize = function() { alert("不要改变图片大小."); return false; }
        }
        else {
            alert("请选择正确的图片格式~")
        }
    }
</script><body>
    <textarea id="txt" cols="60" rows="8"></textarea>
    <br />
    <input id="img" type="file" value="选择图片" />
    <input type="button" value="添加" onclick="selImg(img.value)" />
</body>
</html>
我把<textarea id="txt" cols="60" rows="8" readonly="readOnly"/>该成了<textarea id="txt" cols="60" rows="8" readonly="readOnly"></textarea>前者没法正常显示
另外告诉你个好消息
后者的图片就没法编辑
终于等到高手了, 但是能够把alert取消掉吗? 我改成这样, 就不能达到效果了!
o.onresize = function() {  return false;}另外通过CSS,限制点击图片时不显示那个可编辑的四边框能够实现吗?
o.onresize=function(){this.style.width=this.style.height='100px';}
o=document.createElement("img");
改成->
o = document.createElement("<img unselectable='on' >"); <textarea id="txt" cols="60" rows="8" ~~readonly="readOnly"~~/>
<-- readonly去掉
  但是这样不能选中了, 不能选中, 就不能够删除这个Img....只希望不允许调整大小...
o.onresizestart = function () {  return false; }
o.onresizestart = function () { return false; }这个好。
o.unselectable='on';
这个是正解