textarea的不寻常的形状？ [英] Unusual shape of a textarea?

问题描述

通常textareas是矩形或正方形，如下所示：

但我想要一个自定义的textarea，像这样，例如：

如何实现？

解决方案

简介

首先，在其他职位。我认为这一个是目前（2013年），可以兼容最大数量的浏览器，因为它不需要任何CSS3属性。但是，该方法不适用于不支持的浏览器 contentdeditable ，请小心。

使用div contenteditable解决方案

如 @Getz 建议，您可以使用带有 contenteditable ，然后用一些div在它上面形状。这里是一个例子，有两个块浮动在主div的左上角和右上角：

如您所见，您必须边框，如果您想要与您在信息中请求的结果相同。主div在每一边都有蓝色边框。接下来，必须粘贴红色块以隐藏主div的顶部边框，并且您需要仅在特定边上将边框应用于边框（底部和左侧用于右侧块，底部和

）。

此后，您可以通过Javascript获取内容，当触发。我想你也可以处理其余的CSS（ font-size ， color 等）:)

完整代码示例

  .block_left {background-colour：red; height：70px; width：100px; float：left; border-right：2px solid blue; border-bottom：2px solid blue;}。block_right {background-color：red; height：70px; width：100px; float：right; border-left：2px solid blue; border-bottom：2px solid blue;}。div2 {background-color：white; font-size：1.5em; border：2px solid blue;}。parent {height：300px; width：500px;}  

 < div class = > < div class =block_left>< / div> < div class =block_right>< / div> < div class =div2contenteditable =true> Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。Ut ...< / div>< / div>  

Usually textareas are rectangular or square, like this:

But I want a custom-shaped textarea, like this, for example:

How is this possible?

解决方案

Introduction

First, there are many solutions, proposed in other posts. I think this one is currently (in 2013) the one which can be compatible with the largest number of browsers, because it doesn't need any CSS3 properties. However, the method will not work on browsers which doesn't support contentdeditable, be careful.

Solution with a div contenteditable

As proposed by @Getz, you can use a div with contenteditable and then shape it with some div on it. Here is an example, with two blocks which float at the upper left and the upper right of the main div:

As you can see, you have to play a little with the borders if you want the same result as you requested in your post. The main div has the blue border on every side. Next, red blocks has to be sticked to hide top borders of the main div, and you need to apply border to them only on particular sides (bottom and left for the right block, bottom and right for the left).

After that, you can get the content via Javascript, when the "Submit" button is triggered for example. And I think you can also handle the rest of the CSS (font-size, color, etc.) :)

Full code sample

.block_left {
  background-color: red;
  height: 70px;
  width: 100px;
  float: left;
  border-right: 2px solid blue;
  border-bottom: 2px solid blue;
}

.block_right {
  background-color: red;
  height: 70px;
  width: 100px;
  float: right;
  border-left: 2px solid blue;
  border-bottom: 2px solid blue;
}

.div2 {
  background-color: white;
  font-size: 1.5em;
  border: 2px solid blue;
}

.parent {
  height: 300px;
  width: 500px;
}

<div class="parent">
  <div class="block_left"></div>
  <div class="block_right"></div>
  <div class="div2" contenteditable="true">
    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut..."
  </div>
</div>

这篇关于textarea的不寻常的形状？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！