Fatal编程技术网
  • javascript/
  • Javascript 从文本区域删除点标记

Javascript 从文本区域删除点标记

javascript html css

Javascript 从文本区域删除点标记,javascript,html,css,textarea,Javascript,Html,Css,Textarea,如何从textarea中删除右下角点 有一个cssresize的解决方案：无，但我不想删除resize 那么是否可以使用jQuery执行…这是可能的，我发现了一个jQuery UI 使用此源代码，您可以自定义textarea <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Resizable - Textarea&l

如何从textarea中删除右下角点

有一个css
resize的解决方案：无
，但我不想删除resize

那么是否可以使用jQuery执行…

这是可能的，我发现了一个jQuery UI

使用此源代码，您可以自定义textarea

<!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>


jQuery UI可调整大小-文本区域
.ui可调整大小的se{
底部：17px；
}
$（函数（）{
$（“#可调整大小”）。可调整大小({
手柄：“se”
});
});
只需通过添加

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


.ui图标、.ui小部件内容.ui图标{
背景图像：无；
}
之后：

 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
尝试以下两种方法：

.none:：-webkit大小调整器{
显示：无；
}
.pic:：-webkit大小调整器{
背景：url(http://www.zhangxinxu.com//study/image/selection.gif);
轮廓：1个点#000；
}
最后，我做到了。您可以使用元素（例如
span
）等包装
textarea
。请参阅。我没有使用任何javascript或jquery，对于棘手的部分，我使用了受支持的指针事件。

您考虑过屏蔽解决方案吗

下面是一个基本示例（仅在Chrome上测试）：

演示：

更新（基于评论）：

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

如果没有
resize:none，则无法删除resize handle属性。但您可以在这些虚线上定位
div
（调整手柄大小）。请看这里的演示



textarea{
位置：相对位置；
利润率：20px 0 0 20px；
z指数：1；
}
.包裹{
位置：相对位置；
显示：内联块；
}
.把手藏起来{
高度：12px；
宽度：12px；
位置：绝对；背景：#fff；
底部：2px；
右：2px；
指针事件：无；
z指数：2；
}




你好是我答案的一个有效示例：

首先，这是基于CSS3的，并非所有浏览器都完全支持CSS3


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



HTML
结束HTML
CSS3
.没有点{
调整大小：无；
宽度：100%；
身高：100%；
边界：无；
}
.调整你的尺寸{
调整大小：两者；
溢出：隐藏；
边框：2件纯黑；
边界半径：5px；
/*此处放置文本区域的默认大小*/
宽度：50%；
高度：250px；
}
完CSS3



希望这有帮助
试试这个，但是它的
很有趣
，包括
拖拽
和
div

HTML代码


 <div id="d2" class="ui-widget-content" contenteditable>
        I look like textarea :)
    </div>


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）来调整大小


嗯，你不能两者兼得。或者你可以调整它的大小，并有点，或者你不能调整它的大小，也不会有点…角点可能只出现在文本区域悬停。如果这样的方式适合你，我想用纯CSS实现会非常简单。我的意思是你可以在角落处制作白色CSS三角形，并将其隐藏在悬停位置，以便能够调整文本区域的大小。No Ben，我希望用户能够调整大小，但不会显示点标记……浏览器的行为是有原因的。具有可调整大小的文本区域但没有指示/拖动句柄是不好的。浏览器添加此图标是有原因的，这些模式通常不应该被破坏。您的第一个示例是我想要的，但它仅在
-webkit-
浏览器中工作，firefox等呢？您应该能够使用resize:none；/*对Firefox也禁用可调整大小*/功能。我在问题中提到了“我不想删除大小调整”，以及为什么必须添加两个
textarea
@om。您想禁用重新调整大小功能吗？不，我只是想删除点，这意味着它看起来像一个文本框，但它应该是resizable@om. 您要求删除我的解决方案可以做到的点。您必须使用一些技巧，因为您试图更改textarea元素的原始行为。我想我的解决方案可以帮助你。@Zhansingsong提供了我问题的解决方案，但firefox浏览器不支持这一点……现在我正在等待更好的解决方案，如果可能的话，只使用textarea而不使用额外的div等等……这根本不会掩盖任何东西！这并不能掩盖任何事实。通过阴影（铬）仍然可以看到点@RickDoesburg，我想你可能误解了我的答案。这只是一个概念。OP可能需要考虑的一个想法。这个例子只是这个概念的一个基本说明，并不是最终的解决方案。

#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;
}



$(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;
        }
    }});

    });