Question

我有一个输入文本字段，app用户可以在其中输入文档说明。在页面加载事件中，我检查此输入字段是否为空。如果它是空的，我插入以下文本并将样式更改为斜体和红色 -

Please enter a description for this document

当页面处于活动状态时，我有onblur和onfocus个事件的事件监听器。

基本上，如果用户点击文本字段，我会将CSS更改回正常和黑色，并将值还原为空字符串。

Onblur我会检查内容 - 如果它是空的我将恢复到“请输入...”消息和红色/斜体CSS。如果它不是空的，我将按原样保持用户输入。

我遇到的问题是，在初始页面加载后，如果用户离开到另一个页面进行查找然后回来并且他们没有更改文档描述，那么它仍然说“请输入......“，红色和斜体的CSS不起作用。

我在Firefox中遇到过所有浏览器。

以下是我在浏览器中注册页面onload事件的方法 -

//Microsoft Internet Explorer Browser - iFrame event register
if (navigator.appName.indexOf("Microsoft") != -1) {
  var frame = getPortlet();

  frame.contentWindow.location.replace('${channelUrl}');
  var prevPortletLoadEvent = frame.onload ? frame.onload : function () {};
  var refresh = function() {
    prevPortletLoadEvent();
    resizePortletContainer();
    attachTinyButtonListener();
    attachDocumentDescriptionListener();
    enforceDocumentDescriptionStyleIfNecessary();
  };

  if(frame.attachEvent) { frame.attachEvent('onload', refresh); } //IE browsers before version 9
  else  { frame.addEventListener('load', refresh, false); }
}

//All other major browsers - iFrame event register
else {
  var frame = getPortlet();
  var prevPortletLoadEvent = frame.onload ? frame.onload : function () {};
  frame.onload = function () {
    prevPortletLoadEvent();
    resizePortletContainer();
    attachTinyButtonListener();
    attachDocumentDescriptionListener();
    enforceDocumentDescriptionStyleIfNecessary();
  };

  var prevPortletResizeEvent = frame.onresize ? frame.onresize : function () {};
  var onresize = function () {
    prevPortletResizeEvent();
    resizePortletContainer();
    attachTinyButtonListener();
    attachDocumentDescriptionListener();
    enforceDocumentDescriptionStyleIfNecessary();
  };
}

这是enforeDocumentDescriptionStyleIfNecessary -

function enforceDocumentDescriptionStyleIfNecessary() {

  var  efrm  = getPortlet();
  var  e_doc = efrm.contentDocument ? efrm.contentDocument: efrm.contentWindow.document;
  var  e_docElement = e_doc.getElementById('document.documentHeader.documentDescription');
  if (e_docElement.value == 'Please enter a description for this document') {


    e_docElement.style = 'italic';
alert("1");    
    e_docElement.color = 'red';
alert("2");
  }
}

代码在页面加载时执行。警告框显示显示1和2，我可以在每个警报框之后直观地检查此元素的html）。

没有添加样式！就好像这段代码被执行但被忽略了......

我做错了什么？

Answer 1

您未正确设置元素的样式。它应该是：

e_docElement.style.fontStyle = 'italic';
e_docElement.style.color = 'red';

您始终需要使用style属性来修改元素的内联css。

在页面加载事件上使用Javascript更改CSS

1 个答案: