Textarea.js 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  1. MWF.xDesktop.requireApp("process.Xform", "$Input", null, false);
  2. /** @class Textarea 多行文本组件。
  3. * @example
  4. * //可以在脚本中获取该组件
  5. * //方法1:
  6. * var field = this.form.get("fieldId"); //获取组件对象
  7. * //方法2
  8. * var field = this.target; //在组件本身的脚本中获取,比如事件脚本、默认值脚本、校验脚本等等
  9. *
  10. * var data = field.getData(); //获取值
  11. * field.setData("字符串值"); //设置值
  12. * field.hide(); //隐藏字段
  13. * var id = field.json.id; //获取字段标识
  14. * var flag = field.isEmpty(); //字段是否为空
  15. * field.resetData(); //重置字段的值为默认值或置空
  16. * @extends MWF.xApplication.process.Xform.$Input
  17. * @o2category FormComponents
  18. * @o2range {Process|CMS|Portal}
  19. * @hideconstructor
  20. */
  21. MWF.xApplication.process.Xform.Textarea = MWF.APPTextarea = new Class({
  22. Implements: [Events],
  23. Extends: MWF.APP$Input,
  24. _loadUserInterface: function(){
  25. this._loadNode();
  26. if (this.json.compute == "show"){
  27. this._setValue(this._computeValue());
  28. }else{
  29. this._loadValue();
  30. }
  31. },
  32. _loadNode: function(){
  33. if (this.readonly || this.json.isReadonly){
  34. this._loadNodeRead();
  35. }else{
  36. this._loadNodeEdit();
  37. }
  38. },
  39. _loadNodeRead: function(){
  40. this.node.empty();
  41. this.node.set({
  42. "nodeId": this.json.id,
  43. "MWFType": this.json.type
  44. });
  45. },
  46. _setValue: function(value){
  47. if (!value) value = "";
  48. var p = o2.promiseAll(value).then(function(v){
  49. if (o2.typeOf(v)=="array") v = v[0];
  50. this._setBusinessData(v);
  51. if (this.node.getFirst()) this.node.getFirst().set("value", v || "");
  52. if (this.readonly || this.json.isReadonly){
  53. var reg = new RegExp("\n","g");
  54. var reg2 = new RegExp("\u003c","g"); //尖括号转义,否则内容会截断
  55. var reg3 = new RegExp("\u003e","g");
  56. var text = value.replace(reg2,"&lt").replace(reg3,"&gt").replace(reg,"<br/>");
  57. this.node.set("html", text);
  58. }
  59. //this.__setValue(v);
  60. }.bind(this), function(){});
  61. this.moduleValueAG = p;
  62. p.then(function(){
  63. this.moduleValueAG = null;
  64. }.bind(this), function(){
  65. this.moduleValueAG = null;
  66. }.bind(this));
  67. // this.moduleValueAG = o2.AG.all(value).then(function(v){
  68. // this.moduleValueAG = null;
  69. // if (o2.typeOf(v)=="array") v = v[0];
  70. // this._setBusinessData(v);
  71. // if (this.node.getFirst()) this.node.getFirst().set("value", v || "");
  72. // if (this.readonly || this.json.isReadonly){
  73. // var reg = new RegExp("\n","g");
  74. // var reg2 = new RegExp("\u003c","g"); //尖括号转义,否则内容会截断
  75. // var reg3 = new RegExp("\u003e","g");
  76. // var text = value.replace(reg2,"&lt").replace(reg3,"&gt").replace(reg,"<br/>");
  77. // this.node.set("html", text);
  78. // }
  79. // }.bind(this));
  80. //
  81. // if (this.moduleValueAG) this.moduleValueAG.then(function(){
  82. // this.moduleValueAG = null;
  83. // }.bind(this));
  84. return value;
  85. // if (value && value.isAG){
  86. // this.moduleValueAG = value;
  87. // value.addResolve(function(v){
  88. // this._setValue(v);
  89. // }.bind(this));
  90. // }else{
  91. // this._setBusinessData(value);
  92. // if (this.node.getFirst()) this.node.getFirst().set("value", value || "");
  93. // if (this.readonly || this.json.isReadonly){
  94. // var reg = new RegExp("\n","g");
  95. // var reg2 = new RegExp("\u003c","g"); //尖括号转义,否则内容会截断
  96. // var reg3 = new RegExp("\u003e","g");
  97. // var text = value.replace(reg2,"&lt").replace(reg3,"&gt").replace(reg,"<br/>");
  98. // this.node.set("html", text);
  99. // }
  100. // return value;
  101. // }
  102. },
  103. // _setValue: function(value){
  104. // this._setBusinessData(value);
  105. // if (this.node.getFirst()) this.node.getFirst().set("value", value || "");
  106. // if (this.readonly || this.json.isReadonly){
  107. // var reg = new RegExp("\n","g");
  108. // var reg2 = new RegExp("\u003c","g"); //尖括号转义,否则内容会截断
  109. // var reg3 = new RegExp("\u003e","g");
  110. // var text = value.replace(reg2,"&lt").replace(reg3,"&gt").replace(reg,"<br/>");
  111. // this.node.set("html", text);
  112. // }
  113. // },
  114. _resetNodeEdit: function(){
  115. var input = new Element("textarea", {"styles": {
  116. "background": "transparent",
  117. "width": "100%",
  118. "border": "0px"
  119. }});
  120. var node = new Element("div", {"styles": {
  121. "ovwrflow": "hidden",
  122. "position": "relative",
  123. "padding-right": "2px"
  124. }}).inject(this.node, "after");
  125. input.inject(node);
  126. this.node.destroy();
  127. this.node = node;
  128. },
  129. _loadNodeEdit: function(){
  130. if (!this.json.preprocessing) this._resetNodeEdit();
  131. var input = this.node.getFirst();
  132. input.set(this.json.properties);
  133. if( this.form.json.textareaDisableResize )input.setStyle("resize","none");
  134. this.node.set({
  135. "id": this.json.id,
  136. "MWFType": this.json.type
  137. });
  138. this.node.addEvent("change", function(){
  139. this._setBusinessData(this.getInputData());
  140. }.bind(this));
  141. this.node.getFirst().addEvent("blur", function(){
  142. this.validation();
  143. }.bind(this));
  144. this.node.getFirst().addEvent("keyup", function(){
  145. this.validationMode();
  146. }.bind(this));
  147. },
  148. _afterLoaded: function(){
  149. if (!this.readonly){
  150. this.loadDescription();
  151. }
  152. },
  153. loadDescription: function(){
  154. if (this.readonly || this.json.isReadonly)return;
  155. var v = this._getBusinessData();
  156. if (!v){
  157. if (this.json.description){
  158. var size = this.node.getFirst().getSize();
  159. var w = size.x-3;
  160. if( this.json.showIcon!='no' && !this.form.json.hideModuleIcon ){
  161. w = size.x-23;
  162. }
  163. this.descriptionNode = new Element("div", {"styles": this.form.css.descriptionNode, "text": this.json.description}).inject(this.node);
  164. this.descriptionNode.setStyles({
  165. "width": ""+w+"px",
  166. "height": ""+size.y+"px",
  167. "line-height": ""+size.y+"px"
  168. });
  169. this.setDescriptionEvent();
  170. }
  171. }
  172. },
  173. setDescriptionEvent: function(){
  174. if (this.descriptionNode){
  175. if (COMMON.Browser.Platform.name==="ios"){
  176. this.descriptionNode.addEvents({
  177. "click": function(){
  178. this.descriptionNode.setStyle("display", "none");
  179. this.node.getFirst().focus();
  180. }.bind(this)
  181. });
  182. }else if (COMMON.Browser.Platform.name==="android"){
  183. this.descriptionNode.addEvents({
  184. "click": function(){
  185. this.descriptionNode.setStyle("display", "none");
  186. this.node.getFirst().focus();
  187. }.bind(this)
  188. });
  189. }else{
  190. this.descriptionNode.addEvents({
  191. "click": function(){
  192. this.descriptionNode.setStyle("display", "none");
  193. this.node.getFirst().focus();
  194. }.bind(this)
  195. });
  196. }
  197. this.node.getFirst().addEvents({
  198. "focus": function(){
  199. this.descriptionNode.setStyle("display", "none");
  200. }.bind(this),
  201. "blur": function(){
  202. if (!this.node.getFirst().get("value")) this.descriptionNode.setStyle("display", "block");
  203. }.bind(this)
  204. });
  205. }
  206. }
  207. });