1

我正在尝试使用一些 JAVASCRIPT 和 CSS 设置我的 textarea 的样式，因此单击它时，它应该将大小从 20px 高度扩展到 120px 高度，document.getElementById("tweet_area") 但是当您在页面中进行任何单击而不是单击 textarea 时，textarea 正在扩展。有人能收集到我吗 我是 JavaScript 新手

<script language="javascript">

      document.onclick=changeElement;

      function changeElement() {

          var textarea = document.getElementById("tweet_area");

          textarea.style.backgroundColor="#fff";
          textarea.style.width="565px";
          textarea.style.color="#000";
          textarea.style.height="120px";
          textarea.style.paddingLeft="1px";
          textarea.style.paddingTop="1px";
          textarea.style.fontFamily="Tahoma";
          textarea.style.fontSize="10pt";
          textarea.style.border="groove 1px #e5eaf1";
          textarea.style.position="inherit";
          textarea.style.textDecoration="none";  
      }

</script> 


<style type="text/css">
#tweet_area{
    width:565px;
    height:25px;
    overflow:hidden;
    margin:1px auto;
    font-family:Tahoma;
    font-size:10pt;
    font-weight:400px;
    color:#000;
    max-width:565px;
    min-width:565px;
    min-height:25px;
    max-height:120px;
    border:groove 1px #e5eaf1;
    padding-right:10px;
}
</style>
4

3 回答 3

2

您正在将点击处理程序应用于整个文档：

 document.onclick=changeElement;

...这就是为什么它会响应页面上任意位置的点击。尝试将其仅应用于文本区域：

  document.getElementById("tweet_area").onclick=changeElement;

请注意，document.getElementById()要找到您的元素，脚本必须在元素被解析后运行。所以要么将脚本块放在元素之后（在正文的末尾是一个好地方），要么将你的 JS 包装在一个window.onload处理程序中。

尽管您没有问，但如果我可以建议：不要在您的 JS 函数中设置所有这些单独的样式 - 相反，使用这些样式创建一个类，然后在您的 JS 中添加该类。

于 2013-06-03T11:06:03.837 回答
0

使用 CSS 来设置你的 textarea 样式，这里不需要 javascrcipt 样式。在特定类下的 CSS 中准备您的样式，当您需要时，您可以添加您的元素这个类及其属性。这是更清洁的解决方案。使用焦点和 模糊事件来获取 textarea 元素。这是示例。

HTML

<textarea rows="4" cols="50" id="txtArea">

<textarea>

JS

$(document).ready(function() {

    $('#txtArea').on("focus", function(event) {

        if(!$('#txtArea').hasClass('customTextAreaClass')){

            $('#txtArea').addClass('customTextAreaClass');

        }
    });

    $('#txtArea').on("blur", function(event) {

        if($('#txtArea').hasClass('customTextAreaClass')){

            $('#txtArea').removeClass('customTextAreaClass');

        }
    });
});

CSS

.customTextAreaClass{
    background-color: #fff;
    width: 565px;
    color: #000;
    height: 120px;
    padding-left: 1px;
    padding-top: 1px;
    font-family: "Tahoma", Geneva, sans-serif;
    font-size: 10pt;
    border: groove 1px #e5eaf1;
    position: inherit;
    text-decoration: none;  
}
于 2013-06-03T12:14:24.890 回答
0

我已经编写了一个 jQuery 代码，用于TextArea在用户按下时调整Enter Key大小TextArea。您可以将其更改为 Click Event for TextArea。

这是帖子：https ://stackoverflow.com/a/14211554

于 2013-06-03T12:02:30.413 回答