How to set the value of a text input with MooTools

问题

I have just begun playing with MooTools, and I don't understand why the following happens:

var input = new Element('input');
input.set('type','text');
input.set('value','this is the value');
console.log(input);

results in: <input type="text">, so setting the value hasn't worked.

But if I do this:

var input = new Element('input');
input.set('type','text');
input.set('someValue','this is the value');
console.log(input);

I get the expected result of <input type="text" somevalue="this is the value">.

Am I overlooking something, is what I am trying to do not allowed, is this a bug in Chrome (11.0.696.71, OS X) or am I doing something else wrong?

Update: thanks for your answer! You are right, the value is actually being set; console.log(input.get('value')) gives back the proper value and I can see the value in the input field when I append the input object to the DOM.

Apparently, the value setting is just not reflected as an attribute of the HTML element, but only stored internally.

回答1:

Are you sure the value isn't being set?

What do you get when you call: input.get('value')

I tested this (in firefox) and even though the console just logs <input type="text"> the value does in fact get set. Try adding the element to the page and you'll see it :)

回答2:

I've had a similar problem with this 'red herring' which I've since solved, and thought I'd share. I'm trying to make certain cells of a table row editable when the user clicks on the row:

var cells = this.getElements("td");
for (var ix=0;ix<cells.length; ix++){
   if (cells[ix].hasClass("edType_text")){
      var celltext = cells[ix].get("text");
      cells[ix].set('text','');
      var editTag = new Element ('input',{type:'text','value':celltext});
      editTag.inject(cells[ix]); 
   }
}

This seemed to work OK but when I clicked on the cell I couldn't edit it. Firebug and Chrome tools showed the added input tag as

<input type='text'>

instead of the expected:

<input type='text' value='xxxxxx' />

However this is perfectly normal as commented on above.

Spotted the 'deliberate' error ?

Of course when I clicked on the input field it triggered the mouse event on the row again, thus preventing me getting at the input!!!! :-{

To avoid this just add this line of code at the end of the if block:

editTag.addEvent("mousedown",function(event){event.stopPropagation();});

来源：https://stackoverflow.com/questions/6222062/how-to-set-the-value-of-a-text-input-with-mootools

标签

javascript

mootools

forms

html-input