我试图第一次使用dojo,所以这可能是显而易见的. 我有一个非常简单的形式,其中有一个textarea需要填写. script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js"/scriptform id='form1' action="
我有一个非常简单的形式,其中有一个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位置.它显示在文本区域内,而不是在文本区域之外,但它是唯一的,非常小的区别.