textarea无法正确呈现

时间:2015-08-06 05:53:11

标签: javascript jquery html css

我正在尝试为textarea elem做一个文本计数器。

起初它按照我的意愿工作。

its initial status

我可以删除并添加字符,它工作得很好。

its counting status

错误是当我选择所有文本并删除所有文本时,不知何故textarea渲染没有边框。

enter image description here

bug status

我查看了javascript,发现当我删除所有内容时,会触发一段代码来设置计数器

counter_elem.children('.text-count').text(count); 

然后textarea将无法正确呈现,但如果我将此代码注释掉,则表示正常。

样式计算形式chrome:

-webkit-appearance: none;
-webkit-font-smoothing: antialiased;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
background-color: rgb(255, 255, 255);
border-bottom-color: rgb(221, 221, 221);
border-bottom-style: solid;
border-bottom-width: 1px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(221, 221, 221);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(221, 221, 221);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(221, 221, 221);
border-top-style: solid;
border-top-width: 1px;
box-sizing: border-box;
color: rgb(0, 0, 0);
cursor: auto;
display: block;
flex-direction: column;
float: left;
font-family: 'Lantinghei SC', 'Hiragino Sans GB', 'Helvetica Neue', Helvetica, Arial, 'Hiragino Sans GB', 华文细黑, STHeiti, 微软雅黑, 'Microsoft YaHei', SimHei, sans-serif;
font-size: 14px;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 100px;
letter-spacing: normal;
line-height: 24px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
outline-color: rgb(86, 90, 92);
outline-offset: 0px;
outline-style: none;
outline-width: 0px;
overflow-x: auto;
overflow-y: auto;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
resize: none;
text-align: start;
text-indent: 0px;
text-rendering: auto;
text-shadow: none;
text-transform: none;
transition-delay: 0s;
transition-duration: 0.2s;
transition-property: border-color;
transition-timing-function: ease;
white-space: pre-wrap;
width: 800px;
word-spacing: 0px;
word-wrap: break-word;
writing-mode: lr-tb;
-webkit-writing-mode: horizontal-tb;

1 个答案:

答案 0 :(得分:0)

我不知道为什么,但它解决了问题

这是一段代码:

<textarea class="textarea-control work-content" placeholder="录入一条日常工作内容" id="id_work_content_1"></textarea>

这是错误代码:

<textarea class="textarea-control left work-content" placeholder="录入一条日常工作内容" id="id_work_content_1"></textarea>

唯一不同的是左侧,这使得textarea向左浮动。所以在这种情况下,如果它没有浮动,它只是工作正常。所以有些东西与浮动不兼容..