logo标签列表

从文本区域中删除点号标记。

javascripthtmlcsstextarea
13
如何从文本区域中删除右下角的点？

enter image description here

以下CSS有一个解决方案：resize:none，但我不想删除调整大小...所以有没有可能做到...
1
好的，你不能两全其美。要么你可以调整大小并且有点，要么你不能调整大小，也不会有点... - GreyRoofPigeon
2
我是指你可以在角落处制作白色CSS三角形，并在悬停时隐藏它，以便能够调整文本区域的大小。 - Ilya B.
所以您不希望用户能够调整文本区域的大小？对吗？ - user5365803
1
不，我希望用户能够调整大小，但点标记不会显示... - om_jaipur
5
浏览器有其行为方式的原因。拥有可调整大小的文本区域但没有指示/拖动手柄是不好的用户体验（UX）设计。浏览器添加这个图标是有原因的，通常不应该打破这些模式。 - Richik SC
显示剩余2条评论
7个回答
9

尝试以下两种方法：

.none::-webkit-resizer {
    display: none;
}
.pic::-webkit-resizer {
    background:    url(http://www.zhangxinxu.com//study/image/selection.gif);
    outline: 1px dotted #000;
}
<textarea class="none"></textarea>
<textarea class="pic"></textarea>

你的第一个示例是我想要的，但它只在 -webkit- 浏览器中工作，那么火狐浏览器等怎么办？ - om_jaipur
你应该能够在Firefox中使用resize: none; /禁用可调整大小/。http://jsfiddle.net/5c5bqLwt/ - Bryan Ray
6

如果没有使用resize:none;属性，您无法删除调整大小手柄。但是您可以将一个div定位在这些虚线上（调整大小手柄）。请参见此处的演示。

textarea {
    position: relative;
    margin: 20px 0 0 20px;
    z-index: 1;
}
.wrap {
    position: relative;
    display: inline-block;
}

.handle-hide {
    height:12px;
    width:12px;
    position: absolute;background:#fff;
    bottom: 2px;
    right: 2px;
    pointer-events: none;
    z-index: 2;
}
<div class="wrap">
    <div class="handle-hide"></div>
    <textarea placeholder="drag the cyan triangle..."></textarea>
</div>

现在我正在等待更好的解决方案，如果可能的话只使用文本区域而不是额外的 div 等。 - om_jaipur
4
使用jQuery是可以实现的，我在jQuery UI找到了这里 使用此源代码您可以自定义文本区域。
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Resizable - Textarea</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  .ui-resizable-se {
    bottom: 17px;
  }
  </style>
  <script>
  $(function() {
    $( "#resizable" ).resizable({
      handles: "se"
    });
  });
  </script>
</head>
<body>

<textarea id="resizable" rows="5" cols="20"></textarea>


</body>
</html>

只需添加以下内容即可覆盖CSS：

<style>
    .ui-icon, .ui-widget-content .ui-icon {
    background-image: none;
    }
</style>

after: 

 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
3

你考虑过遮罩方案吗？

这里有一个基本示例（仅在Chrome上测试过）：

textarea {
    border: 1px solid #000;
    box-shadow: inset .3em 0 #000, 
                inset -.3em 0 #000,
                inset 0 .3em #000,
                inset 0 -.3em #000;
    padding: 10px;
}

演示：http://jsfiddle.net/onzqnk5v/

更新（基于评论）：

这个答案只是一个考虑的概念。示例代码旨在说明概念，而不是作为最终解决方案。

2
那根本没有掩盖任何东西！ - Carlos2W
这确实没有遮盖任何东西。在阴影下仍然可以看到点（Chrome）。 - Rick Doesburg
@RickDoesburg，我觉得你可能误解了我的回答。这只是一个概念。这是一个OP可能想考虑的想法。示例只是该概念的基本说明，不意味着它是最终解决方案。 - Michael Benjamin
3

你好，这里是我回答的一个可行示例：点击此处

首先需要指出的是，这基于CSS3的resize属性，在所有浏览器中并不完全支持。

HTML 

<div class="resize_this">
    <textarea class="no_dots"></textarea>
</div>

ENDS HTML

CSS3
.no_dots{
  resize: none;
  width: 100%;
  height: 100%;
  border:none;
}

.resize_this{
  resize:both;
  overflow: hidden;
  border:2px solid black;
  border-radius: 5px;
/*HERE PLACE DEFAULT SIZE FOR THE TEXTAREA*/
  width: 50%;
  height: 250px;
}
ENDS CSS3

希望这可以帮到你 T04435

1
尝试这个，但有趣的是，它涉及到拖拽和div。
HTML代码。
 <div id="d2" class="ui-widget-content" contenteditable>
        I look like textarea :)
    </div>

css 代码

#d2{
-moz-appearance: textfield;
    -webkit-appearance: textfield;
    background-color: white;
    background-color: -moz-field;
    border: 1px solid darkgray;
    box-shadow: 1px 1px 1px 0 lightgray inset;  
    font: -moz-field;
    font: -webkit-small-control;
    margin-top: 5px;
    padding: 2px 3px;
    width: 300px;
    height: 200px;
}

jquery代码

$(function() {
    $( "#d2" ).draggable({revert: function(obj){
            if (obj === true) {
            // success

            return false;
        }
        else {
            // reverting
            var offset = $(this).offset();
            var xPos = offset.left;
            var yPos = offset.top;


            $("#d2").css("width", $("#d2").width()+xPos);
            $("#d2").css("height", $("#d2").height()+yPos ); 

            return true;
        }
    }});

    });

上述代码可以实现您想要的功能，但是以不同的方式进行操作，只需拖动以增加文本区域（此处为div）以进行调整大小。

jsfiddle链接

1

最后，我做到了。你可以用一个元素（例如 span）等来包装 textarea。请参见我的演示。我没有使用任何javascript或jquery，对于棘手的部分，我使用了pointer-events，这是大多数浏览器支持的。

我在我的问题中提到了“我不想删除调整大小”，并且为什么要添加两个textarea。 - om_jaipur
@om。您想禁用重新调整大小的功能吗？ - Alex
不，我只想要去除点，就像一个文本框但可以调整大小。 - om_jaipur
@om。您要求删除我的解决方案可以完成的点。您必须使用一些技巧，因为您正在尝试更改textarea元素的原始行为。我认为我的解决方案可以帮助您。 - Alex
@Zhansingsong 提供了解决我的问题的方案，但是火狐浏览器不支持该方案... - om_jaipur
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接