从 textarea 中删除点标记
Posted
技术标签:
【中文标题】从 textarea 中删除点标记【英文标题】：Remove dot marks from textarea 【发布时间】：2014-10-15 23:46:42 【问题描述】：如何从 textarea 中删除右下角的点？
有以下css resize:none的解决方案，但我不想删除调整大小...
那么有没有可能……
【问题讨论】：
好吧，你不能两者兼得。要么你可以调整它的大小并有点，或者你不能调整它的大小，也不会有点...... 角点可能只出现在 textarea 悬停上。如果这种方式适合你，我认为用纯 CSS 实现会很简单。 我的意思是你可以在角落制作白色的 CSS-triangle 并在悬停时隐藏它以便能够调整 textarea 的大小 不，Ben，我希望用户能够调整大小，但不会显示点标记... 浏览器出现这样的行为是有原因的。具有可调整大小的文本区域但没有指示/拖动句柄是糟糕的用户体验。浏览器添加此图标是有原因的，这些模式一般不应被破坏。 【参考方案1】：试试这两种方法：
.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- 浏览器中工作，firefox 等呢......
你应该可以使用 resize: none; /* 禁用可调整大小 */ 也适用于 Firefox。 jsfiddle.net/5c5bqLwt【参考方案2】：
如果没有 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>【讨论】：
现在我正在等待更好的解决方案如果只有 textarea 而不是额外的 div 等...【参考方案3】：使用 jQuery 这是可能的，我找到了一个 jQuery UI here
使用此源代码，您可以自定义文本区域
<!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>
之后：
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
【讨论】：
【参考方案4】：你好 HERE 是我回答的一个工作示例：
首先要指出这是基于 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
【讨论】：
【参考方案5】：您是否考虑过掩蔽解决方案？
这是一个基本示例（仅在 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/
更新（基于 cmets）：
这个答案只是一个供考虑的概念。示例代码旨在说明概念，而不是作为最终解决方案。
【讨论】：
这根本掩盖不了任何东西！ 这并没有掩盖任何东西。通过阴影仍然可以看到点 (Chrome) @RickDoesburg，我想你可能误解了我的回答。这只是一个概念。 OP可能要考虑的想法。该示例只是对该概念的基本说明，并不意味着最终解决方案。【参考方案6】：最后，我做到了。你可以用一个元素（例如span）等包裹textarea。见my demo。我没有使用任何 javascript 或 jquery，对于棘手的部分，我使用了 most browser 支持的指针事件。
【讨论】：
我在我的问题中提到“我不想删除调整大小”以及为什么要添加两个textarea
@om。是否要禁用调整大小功能？
不，我只是想删除点，这意味着它看起来像一个文本框，但它应该可以调整大小
@om。您要求删除我的解决方案可以做的点。您必须使用一些技巧，因为您正在尝试更改 textarea 元素的原始行为。我认为我的解决方案可以帮助您。
@Zhansingsong 提供了我的问题的解决方案，但火狐浏览器不支持...【参考方案7】：
试试这个，但它的funny，涉及draggin 和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;
);
);
上面的代码可以做你想做的事，但在不同的口味中，只需拖动以增加 textarea(这里是 div) 来调整大小。
jsfiddle link
【讨论】：
以上是关于从 textarea 中删除点标记的主要内容，如果未能解决你的问题，请参考以下文章
如何从 textarea 1 中删除不包含 textarea 2 中每一行的行？ [PHP]