我试图第一次使用dojo,所以这可能是显而易见的.
我有一个非常简单的形式,其中有一个textarea需要填写.
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js"></script> <form id='form1' action="" method="" dojoType="dijit.form.Form"> <label for="dob">desc:</label> <textarea class='multilinecontrol' dojoType="dijit.form.Textarea" selected='true' required='true'></textarea> <button type='submit' id="next" name="next" dojoType="dijit.form.Button"> Next</button> </form>
我添加了’required’属性,因此我可以确保表单在用户可以继续之前有效.
然而,当表单显示时,textarea周围有一个红色的焦点环,其他小部件都不像这样,它真的很烦人.
知道怎么摆脱它吗?
我可以通过将某种默认文本放入“把东西放在这里”来破解它,但是我必须做额外的验证工作 – 我现在无法解决该怎么做.
它不是复制整个现有的类,而是使用mixin就足够了:
define(["dojo/_base/declare","dojo/_base/lang","dijit/form/SimpleTextarea","dijit/form/ValidationTextBox"],function(declare,lang,SimpleTextarea,ValidationTextBox) { return declare('dijit.form.ValidationTextArea',[SimpleTextarea,ValidationTextBox],{ constructor: function(params){ this.constraints = {}; this.baseClass += ' dijitValidationTextArea'; },templateString: "<textarea ${!nameAttrSetting} data-dojo-attach- point='focusNode,containerNode,textBox' autocomplete='off'></textarea>",validator: function(value,constraints) { return (new RegExp("^(?:" + this._computeRegexp(constraints) + ")"+(this.required?"":"?")+"$",["m"])).test(value) && (!this.required || !this._isEmpty(value)) && (this._isEmpty(value) || this.parse(value,constraints) !== undefined); // Boolean } }) })
不幸的是,我无法使用红色感叹号和验证输入获得完全相同的行为 – 因为Textarea调整了大小,所以我已经完成了CSS技巧:
.dijitValidationTextAreaError,.dijitValidationTextAreaError.dijitTextBoxHover { background-image: url("error.png"); background-position: right; background-repeat: no-repeat; }
需要将error.png从claro主题复制到css位置.它显示在文本区域内,而不是在文本区域之外,但它是唯一的,非常小的区别.